间距问题。用div替换表

时间:2016-10-26 10:55:38

标签: html html-table

这张桌子上面有一个巨大的差距,我无法理解为什么。

enter image description here

这是HTML:



.table-size-guide td {
  border: 1.5px solid #ced9e0;
  padding-left: 10px;
  color: #ced9e0;
  font-family: helvetica;
  font-size: 12px;
}
.sizing-table {
  color: #fd8014;
}

<table class="table-size-guide" style="width: 100%;" cellspacing="2" cellpadding="5">
  <tbody>
    <tr>
      <td style="padding-top: 8px;  padding-right: 40px; padding-bottom: 5px; padding-left: 12px; background-color: #ededed;">
        <span style="color: #ff8f07;"><strong>Waist Size</strong></span>
      </td>
      <td style="padding-top: 8px; padding-right: 0px; padding-bottom: 5px; padding-left: 12px; background-color: #ededed;">
        <span style="color: #ff8f07;"><strong>To fit Height</strong></span>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">26in</div>
      </td>
      <td>
        <div class="sizing-table">128cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">27in</div>
      </td>
      <td>
        <div class="sizing-table">134cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">28in</div>
      </td>
      <td>
        <div class="sizing-table">137cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">29in</div>
      </td>
      <td>
        <div class="sizing-table">140cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">30in</div>
      </td>
      <td>
        <div class="sizing-table">146cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">31in</div>
      </td>
      <td>
        <div class="sizing-table">152cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">32in</div>
      </td>
      <td>
        <div class="sizing-table">152cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">33in</div>
      </td>
      <td>
        <div class="sizing-table">152cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">34in</div>
      </td>
      <td>
        <div class="sizing-table">152cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">35in</div>
      </td>
      <td>
        <div class="sizing-table">158cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">36in</div>
      </td>
      <td>
        <div class="sizing-table">158cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">38in</div>
      </td>
      <td>
        <div class="sizing-table">158cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">40in</div>
      </td>
      <td>
        <div class="sizing-table">158cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">42in</div>
      </td>
      <td>
        <div class="sizing-table">158cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">44in</div>
      </td>
      <td>
        <div class="sizing-table">158cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">46in</div>
      </td>
      <td>
        <div class="sizing-table">158cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">48in</div>
      </td>
      <td>
        <div class="sizing-table">158cm</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="sizing-table">50in</div>
      </td>
      <td>
        <div class="sizing-table">158cm</div>
      </td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

理想情况下,我想将表转换为div但由于存在相当多的行和列而无法找到解决方案。有什么建议吗?

0 个答案:

没有答案