使用CSS設置表格單元格的寬度

我有一個HTML表格，我必須設置總寬度並希望確保標籤列不會太寬。使用CSS設置表格單元格的寬度

它在Firefox 4中按預期工作，但IE 9似乎完全忽略了with屬性。

<html> 
<head> 
<style type="text/css"> 
table,th,td { border: solid 1px; border-collapse: collapse; } 
th.caption { width: 700px; } 
.label { width: 100px; } 
</style> 
</head> 
<body> 

<table> 
<tr><th class="caption" colspan=2>Caption</th></tr> 
<tr><td class="label">Label</td><td>Stuff...</td></tr> 
<tr><td class="label">Label</td><td>Stuff...</td></tr> 
</table> 

</body> 
</html>

來源

2011-05-30 Gene Vincent

添加<!DOCTYPE html>作爲第一行獲得標準模式（不直接關係到你的問題，但你絕對應該這樣做，除非你像IE9故作IE5 - Quirks Mode）。
設置表格的整體寬度爲table而不是th.caption。

參見：http://jsbin.com/icafo3

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
table,th,td { border: solid 1px; border-collapse: collapse; } 
table { width: 700px; } 
.label { width: 100px; } 
</style> 
</head> 
<body> 

<table> 
<tr><th class="caption" colspan=2>Caption</th></tr> 
<tr><td class="label">Label</td><td>Stuff...</td></tr> 
<tr><td class="label">Label</td><td>Stuff...</td></tr> 
</table> 

</body> 
</html>

來源

2011-05-30 19:05:29 thirtydot

只需添加<！DOCTYPE HTML>是足以令它在這兩個瀏覽器。謝謝！ – 2011-05-30 19:14:29

我想這是有關的所有然後:)我想我對最終結果有點困惑。 – thirtydot 2011-05-30 19:18:48

使用CSS設置表格單元格的寬度

回答

相關問題