使用CSS创建带固定宽度列的HTML表格

我希望表格具有固定宽度但动态高度，因为内容可能具有各种长度。下面是一个例子：使用CSS创建带固定宽度列的HTML表格

alt text

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

<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; 
}

任何想法如何使高度动态的？

来源

2010-11-25 Lost in OWL

当内容超出单元格列的宽度时，您想要什么行为？ a：拉伸细胞，或b：隐藏额外的内容？（例如，如果您的内容包含大字符串值，且没有空格或其他标点符号） – scunliffe 2010-11-25 11:11:38

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

这为我工作;）

来源

2010-11-25 11:50:35

我怀疑文中没有'breaking points'（如空格）。所以文本不能分解成多行。一种解决方案是在文本可能中断的地方添加。

来源

2010-11-25 11:10:14 PeeHaa

的问题可能是由您使用的table-layout: fixed引起的 - 我建议把style="width: 150px;"在每个<th>标签和去除table-layout

来源

2010-11-25 11:13:39

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

table thead tr th{ 
    width:120px; 
}

来源

2010-11-25 18:48:22

使用CSS创建带固定宽度列的HTML表格

回答

相关问题