使用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引起的table-layout: fixed -我建议您将style="width: 150px;" 在每个<th>标记中并删除table-layout

Answer 4

<th>宽度趋向于取代<td>宽度。 因此，只需对<th>设置宽度（如Kolink所说）即可解决您的溢出问题。

table thead tr th{
    width:120px; 
}