用CSS设置表格单元格的宽度

如何解决用CSS设置表格单元格的宽度

|| 我有一个HTML表，必须在其中设置整体宽度，并要确保label列不会太宽。它可以在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>

解决方法

将<!DOCTYPE html>作为获得标准模式的第一行（与您的问题没有直接关系，但是除非您喜欢IE9假装为IE5-Quirks模式），否则绝对应该这样做。将桌子的整体宽度设置为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>