Question

我有一个HTML表格，我必须设置整体宽度，并确保标签列不会太宽。

它在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>

Answer 1

添加<!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>

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

1 个答案: