为什么表格行不显示在Edge中?

时间:2018-09-21 20:36:57

标签: html html-table

enter image description here

为了公开发布,我们已删除了我们所有的副本,如果很难看到,则对不起。最右列“ 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中的渲染错误

1 个答案:

答案 0 :(得分:0)

您可以使用CSS

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

请参阅codepen:https://codepen.io/anon/pen/VGRgyJ