固定列高和宽答案

【问题标题】：fixed column height and width固定列高和宽
【发布时间】：2012-01-19 07:08:27
【问题描述】：

我有一张如下表：

<table>
<tr style ="height: 10px;" >
<td style="width: 200px, height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td>    

</tr>
</table>

问题是，当任何一行第二列的内容稍大时，第二列的宽度超过150px，为了补偿第一列的宽度减小。我怎样才能防止这种情况发生。我希望宽度不改变，即使没有显示额外的文本也没关系。

我还希望行和列的高度为 3 行文本且高度固定。

【问题讨论】：

标签： css

【解决方案1】：

首先，代码不正确。这是您更正的代码，请尝试它是否按您的要求工作：

<table>
<tr style="height: 10px;" >
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>    
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
</tr>
</table>

其次，您的样式设计方式非常老派，对您来说很难，尝试创建一个 CSS 类，然后您可以将其应用于每个元素，无需重复规则。事实上，如果这将是您页面上唯一的表格，您可以在 head 中放置类似这样的内容：

<style type="text/css">
td {
width: 200px;
height:10px;
}
</style>

这会将您的规则应用于页面上的所有标签，因此您不必明确设置每个标签的样式。

或者你可以这样做：

<style type="text/css">
.exampleclass {
width: 200px;
height:10px;
}
</style>


<table>
<tr style="height: 10px;" >
<td class="exampleclass"></td>
<td class="exampleclass"></td>    
<td class="exampleclass"></td>
<td class="exampleclass"></td>
</tr>
</table>

这样您可以从一个地方控制您的样式，并且还可以将其应用于您认为合适的其他元素。

如果还有什么问题，尽管问。

编辑：为了满足您以不显示额外内容为代价固定宽度的要求，请同时应用 Guzzie 和 QQping 的答案。虽然如果你对不同的高度没问题，你不必设置溢出：隐藏；

【讨论】：

【解决方案2】：

您应该像这样将表格的样式设置为固定并添加表格的总宽度

<table style='table-layout:fixed' width='300px'>

Firefox 可能不喜欢看到由于固定列宽导致长文本溢出的表格单元格，为了更好地显示这一点，您应该在您的 css 或当前页面上设置以下 TD 样式

<style>
 td {overflow:hidden;}
</style>

【讨论】：

【解决方案3】：

只需将 max-width 添加到您的表格单元格中。

【讨论】：