在html中对齐两个表的列

Question

我知道这已被问了几次，但没有一个答案针对背后的理论问题，它们都没有为我工作（如果这是可以解决的，我不确定的）。

我有两个表。是的，他们需要成为桌子和不，我不能合并它们。其中一个具有另一个的多列值（请参阅示例代码）。正因为如此，两列的共同分隔线从未在Chrome中保持一致。我提到了Chrome，因为它在Firefox上工作，但必须在Chrome上工作。

将单元格的padding重新定义为0，拆分为thead和tbody ...不起作用。当然，如果在这两个表中放入相同数量的列，它就可以工作。任何建设性的评论高度赞赏，因为我有点绝望。谢谢！

<table style="table-layout: fixed; width: 590px; height: 25px; border-collapse:collapse; 
 
    border-spacing:0;"> 
 
    <tr> 
 
    <td style="border-collapse: collapse; border: 1px solid #ddd"></td> 
 
    <td style="border: 1px solid #ddd"></td> 
 
    <td style="border: 1px solid #ddd"></td> 
 
    <td style="border: 1px solid #ddd"></td> 
 
    <td style="border: 1px solid #ddd"></td> 
 
    <td style="border: 1px solid #ddd"></td> 
 
    <td style="border: 1px solid #ddd"></td> 
 
    <td style="border: 1px solid #ddd"></td> 
 
    </tr> 
 
</table> 
 
<table style="table-layout: fixed; width: 590px; height: 25px; border-collapse:collapse; 
 
    border-spacing:0;"> 
 
    <tr> 
 
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;"> 
 
    </tr> 
 
</table>

Answer 1

的问题是在你的table s的设计方式。

这两个表都设置为590px所以理想情况下他们都应占用相同的空间。

但是，您没有考虑cellspacing和cellpadding。

为了设计这两个表格来完美对齐，您需要设置每个td的width以及cellspacing的帐号。

如果分割的第一个表正确每个TD过来对73.75px第二要18.4375

但是第二个表有更多cellspacing由于更多的列数。

如果你计算正确并且计入cellspacing它应该可以解决你的问题。

希望这会解决您的问题。

Answer 2

那种解决了这个问题虽然我不完全满意。 1.修复两个表的tds宽度 2.播放表格的总宽度，直到它匹配得很好。