这张桌子上面有一个巨大的差距,我无法理解为什么。
这是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;
理想情况下,我想将表转换为div但由于存在相当多的行和列而无法找到解决方案。有什么建议吗?