使用CSS创建具有固定宽度列的HTML表

Question

我希望桌子具有固定宽度但动态高度，因为内容可能具有不同的长度。这是一个例子：

我有固定宽度，但内容重叠。我做错了什么？这是我的代码：

<table width="60%" align='center' cellpadding='2' 
        cellspacing='2' border='2' style='table-layout:fixed'>
    <thead>
        <tr>
            <th>#</th>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

我的css：

table{
font-size:12px;
}

table td{
    padding:5px; height:auto;
    background:#f6f6f6;
}

table thead tr th{
    background:#d7dbe2; 
}

如何让高度变得动态？

Answer 1

table td{
    word-wrap:break-word;
}

这对我有用;）

Answer 2

我怀疑文中没有'breaking points'（例如空格）。所以文字不能分成多行。一种解决方案是在文本可能会破坏的位置添加­。

Answer 3

问题可能是由于您使用table-layout: fixed造成的 - 我建议将style="width: 150px;"放入每个<th>代码并删除table-layout

Answer 4

<th>宽度往往取代<td>宽度。因此，简单地将宽度应用于<th>（如Kolink所说）应该可以解决您的溢出问题。

table thead tr th{
    width:120px; 
}