等大小的表格單元格填充整個持有表格的寬度

Question

有沒有一種方法使用HTML/CSS（具有相對大小）來使一行單元格拉伸它所包含的表格的整個寬度？

單元格應該是相同的寬度，並且外部表格大小也是動態的，具有<table width="100%">。

目前如果我沒有指定一個固定的大小;電池只是自動大小以適應其內容。

Answer 1

只需使用百分比寬度和fixed table layout：

<table> 
<tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
</tr> 
</table> 

與

table { table-layout: fixed; } 
td { width: 33%; } 

否則它認爲合適的，如果內容不適合瀏覽器將調整寬度

固定表格佈局是非常重要的也就是說，如果沒有固定的表格佈局，寬度是不是一個規則的建議。

顯然，調整CSS以適應您的情況，這通常意味着只將樣式應用於具有給定類或可能具有給定ID的表格。

Answer 2

您甚至不必爲單元格設置特定寬度，只需將單元格均勻分佈即可。請參閱此jsfiddle，在IE8上測試。

請注意，對於table-layout工作表格樣式的元素必須有一個寬度設置（在我的示例中爲100％）。

Answer 3

使用table-layout: fixed爲table和width: calc(100%/3);用於td一個屬性（假設有3 td的）。通過設置這兩個屬性，表格單元格將爲大小等於。

請參閱demo。