在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.播放表格的總寬度，直到它匹配得很好。