使用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> ，它添加了額外的框。 我假設這就是您想要的。 這是一個演示 。