Почему строки таблицы не отображаются в Edge?

Question

введите описание изображения здесь

Пришлось удалить всю нашу копию, чтобы опубликовать ее, извините, если ее трудно увидеть.Граница для самого правого столбца «Pro» отображается в Firefor, Chrome и Safari, но не в Edge или IE.Кто-нибудь сталкивался с этим раньше?

section class="line">
  <div class="box margin-bottom">
    <div class="margin-top-25">
      <h1></h1>
    </div>
    <div class="line margin-top-25">
      <div class="margin">
        <div class="s-12">
          <center>
            <table class="table2" style="">
              <tr>
                <td width="40%">&nbsp;</td>
                <td width="15%">&nbsp;</td>
                <td width="15%"><span class="button" style="background-color: #d2d2d2; color:#000000"><strong></strong></span></td>
                <td width="15%">&nbsp;</td>
                <td width="15%">&nbsp;</td>
              </tr>
              <tr>
                <td class="td2">&nbsp;</td>
                <td class="td2">
                  <a href="basic_gif1.html" class="tooltip button" style="color: white; background-color: #58595B">
                    <span class="tooltiptext">Click here to learn more about the Basic Package</span>
                    <strong>Basic</strong>
                  </a>
                </td>
                <td class="td2">
                  <a href="plus_gif1.html" class="tooltip button" style="color: white; background-color: #b8282e">
                    <span class="tooltiptext">Click here to learn more about the Plus Package</span>
                    <strong>Plus</strong>
                  </a>
                </td>
                <td class="td2">
                  <a href="pro_gif1.html" class="tooltip button" style="color: white; background-color: #dc8419">
                    <span class="tooltiptext">Click here to learn more about the Pro Package</span>
                    <strong>Pro</strong>
                  </a>
                </td>

              </tr>
              <tr class="tr2">
                <td class="td2" style="text-align: left; font-size: 20px;">
                  <p></p>
                </td>
                <td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><strong>&bull;</strong></td>
                <td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><strong>&bull;</strong></td>
                <td class="td2 tdbl" style="color: #dc8419; font-size: 24px;"><strong>&bull;</strong></td>
              </tr>
              <tr class="tr2">
                <td class="td2" style="text-align: left; font-size: 20px;">
                  <p></p>
                  <p></p>
                </td>
                <td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><img src="img/newjersey.png" /></td>
                <td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><img src="img/newjersey.png" /></td>
                <td class="td2 tdbl" style="font-size: 24px;">
                  <img src="img/newjersey.png" />
                  <p>+</p>
                  <p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif"><strong>WSJ</strong> or <strong>Forbes</strong></p>
                </td>

              </tr>
              <tr class="tr2">
                <td class="td2" style="text-align: left; font-size: 20px;">
                  <p></p>
                </td>
                <td class="td2 tdbl">&nbsp;</td>
                <td class="td2 tdbl">Choose 1</td>
                <td class="td2 tdbl">Choose 2</td>
                </tr>
              <tr class="tr2">
                <td class="td2" style="text-align: left; font-size: 20px;">
                  <p></p>
                </td>
                <td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
                <td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
                <td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
              <tr class="tr2">
                <td class="td2" style="text-align: left; font-size: 20px;">
                  <p></p>
                </td>
                <td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><strong>&bull;</strong></td>
                <td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><strong>&bull;</strong></td>
                <td class="td2 tdbl" style="color: #dc8419; font-size: 24px;"><strong>&bull;</strong></td>
              </tr>
              </tr>
              <tr class="tr2">
                <td class="td2" style="text-align: left; font-size: 20px;">
                  <p></p>
                </td>
                <td class="td2 tdbl" style="color: #58595B;"><strong>$349</strong></td>
                <td class="td2 tdbl" style="color: #58595B;"><strong>$549</strong></td>
                <td class="td2 tdbl" style="color: #58595B;"><strong>$979</strong></td>

              </tr>
              <tr>
                <td colspan="4" class="td2" style="background-color: #f5f5f5;font-size: 20px;"><strong></strong></td>
              </tr>
              <tr>
                <td colspan="4" class="td2" style="text-align: left; font-size: 20px;"><strong></strong></td>
              </tr>
              <tr>
                <td colspan="4" class="td2" style="text-align: left;font-size: 20px;"><strong></strong></td>
              </tr>
            </table>
          </center>
        </div>
      </div>
    </div>
    <div class="line margin-top-25" style="background-color: #b8282e;">&nbsp;</div>
    <div class="margin-top-25">
      <h1 id="tools"></h1>
      <p></p>
    </div>
    <div class="line margin-top-25">
      <div class="margin">
        <div class="s-12">
          <div class="tabs">
            <div class="tab-item tab-active">
              <a class="tab-label active-btn" name="" style=" width: 33.33333333%;"></a>
              <div class="tab-content">
                <div class="box" style="text-align: left">
                  <center>
                    <table class="table2" style="width: 60%;">
                      <tr class="tr2">
                        <td class="td2">&nbsp;</td>
                        <td class="td2" colspan="6"><strong>Quantity</strong></td>
                      </tr>
                      <tr class="tr2">
                        <td class="td2"><strong>Product</strong></td>
                        <td class="td2"><strong>100</strong></td>
                        <td class="td2"><strong>250</strong></td>
                        <td class="td2"><strong>500</strong></td>
                        <td class="td2"><strong>1,000</strong></td>
                        <td class="td2"><strong>2,000</strong></td>
                        <td class="td2"><strong>3,000</strong></td>
                      </tr>
                      <tr class="tr2">
                        <td class="td2"><a href="#openModal_" class="link"></a></td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                      </tr>
                      <tr class="tr2">
                        <td class="td2"><a href="#openModal_Brochure" class="link">Brochures</a></td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                        <td class="td2" style="font-size: 12px;">$</td>
                      </tr>
                      <tr class="tr2">
                        <td class="td2"><a href="#openModal_" class="link"></a></td>
                        <td class="td2" style="font-size: 12px;">$200</td>
                        <td class="td2" style="font-size: 12px;">$245</td>
                        <td class="td2" style="font-size: 12px;">$325</td>
                        <td class="td2" style="font-size: 12px;">$525</td>
                        <td class="td2" style="font-size: 12px;">$825</td>
                        <td class="td2" style="font-size: 12px;">$925</td>
                      </tr>
                      <tr class="tr2">
                        <td class="td2" colspan="7" style="font-size: 12px;"></td>
                      </tr>
                    </table>

Для жизни я не вижу, что здесь происходит.По общему признанию, я довольно плохо знаком с HTML, но, проверяя W3 и другие онлайн-ресурсы, я не смог определить, что может привести к неправильной визуализации в IE / Edge

Answer 1

Вы можете использовать CSS

table {border-collapse: collapse;}
.table2 td {border: 1px solid black;}

См. Код: https://codepen.io/anon/pen/VGRgyJ