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

我试图对齐两个HTML表，一个在另一个下面。原因是我需要两个标题，当用户滚动时，它们都需要保持固定。我正在使用来实现这一点，但它只浮动一个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>

---

更现实的例子是在-单元格边框不对齐，即使宽度百分比相等，这会添加额外的框。我想这就是你想要的。这是一个。

还是第一排？空白空间等的不均匀？两行的边界不对齐，我需要它们对齐，仍然不明白…你想让它看起来像什么？举个例子？