Question

我的桌子如下：

<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行文本并固定在高度上。

Answer 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类，然后可以将其应用于每个元素，无需重复规则。事实上，如果这将是您网页上唯一的表格，您可以将这样的内容放在头部：

<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的答案。虽然如果你的身高不同，你就不必设置溢出：隐藏;

Answer 2

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

Answer 3

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

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

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

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

固定柱高度和宽度

3 个答案: