使用colspan时表格单元格边框未对齐

Question

我正在尝试对齐两个HTML表，一个在另一个下面。 原因是我需要两个标题，并且在用户滚动时它们都需要保持固定。 我正在使用jQuery floatThead来实现这一点，但它只浮动单个thead行。 我的解决方法是这样的：

<div>
    <table style="width:100%;">
        <thead>
           <tr>
               <th colspan="2" style="width:50%;">Etc</th>
               <th colspan="2" style="width:50%;">Etc</th>
           </tr>
       </thead>
    </table>
</div>

<div class="floatTheadContainer">
    <table style="width:100%;">
        <thead>
           <tr>
               <th style="width:25%;">Etc</th>
               <th style="width:25%;">Etc</th>
               <th style="width:25%;">Etc</th>
               <th style="width:25%;">Etc</th>
           </tr>
       </thead>
    </table>
</div>

更现实的示例是在JSFiddle上 -即使宽度百分比相等，单元格边界也不对齐

Answer 1

您有<th style="width:2%;"></th> ，它添加了额外的框。 我假设这就是您想要的。 这是一个演示 。