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

【问题标题】：Setting width of table cells with CSS使用 CSS 设置表格单元格的宽度
【发布时间】：2012-01-17 10:10:17
【问题描述】：

我有一个 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>

【问题讨论】：

标签： html css internet-explorer firefox cross-browser

【解决方案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>

【讨论】：

只需添加就足以让它在两种浏览器中都工作。谢谢！
我想这毕竟是相关的 :) 我想我对想要的最终结果有点困惑。