如何保持列表寬度基於最寬列的所有列相等

Question

我看到很多關於列寬的問題，但我無法找到與我的完全相同的場景的答案。

這裏是我的表：

<table> 
    <tr> 
     <td colspan="3">Title goes here</td> 
     <td>A</td> 
     <td class="right">B</td> 
    </tr> 

    <tr> 
     <td rowspan="3">C</td> 
     <td>D</td> 
     <td>E</td> 
     <td>F</td> 
     <td class="right">G</td> 
    </tr> 

    <tr> 
     <td>H</td> 
     <td colspan="2" class="center">I</td> 
     <td rowspan="2" class="right">J</td> 
    </tr> 

    <tr> 
     <td>K</td> 
     <td>L</td> 
     <td>M</td> 
    </tr> 

    <tr> 
     <td class="right">N</td> 
     <td colspan="4" class="center">O</td> 
    </tr> 
</table> 

，這裏是我的CSS：

<style> 
    table 
    { 
     table-layout: fixed; 

    } 

    table, td 
    { 
     border: 1px solid; 
    } 

    .right 
    { 
     text-align:right; 
     vertical-align:bottom; 
    } 
    .center 
    { 
     text-align: center; 
    } 
</style> 

我想實現的是所有五列有基於最廣泛的一個相同的寬度。這個想法是我不知道冠軍會有多大。我知道我可以爲表格設置固定的寬度（例如200px或100％），但我不想這樣做。隨着標題展開，我希望列的寬度和表格的寬度都擴大。正如你可以看到標題橫跨三列。

Answer 1

即使在CSS的幫助下，恐怕也無法用HTML完成。您還需要一些腳本：在瀏覽器格式化後處理表的腳本，找到最寬的列並將所有列設置爲該寬度。假設你的table元素有id=t，以下純JavaScript代碼執行工作：

<script> 
window.onload = function() { 
var tbl = document.getElementById("t"); 
var row = tbl.rows[0]; 
var maxWidth = 1; 
for (var i = 0; i < row.childNodes.length; i++) { 
    var width = row.childNodes[i].offsetWidth; 
    if(width > maxWidth) { maxWidth = width; } 
    } 
for (var i = 0; i < row.childNodes.length; i++) { 
    row.childNodes[i].style.width = maxWidth + "px"; 
    } 
} 
</script>