设置表列宽度常量，而不考虑其单元格中的文本量？ [英] Set the table column width constant regardless of the amount of text in its cells?

问题描述

在我的表格中，我将列中第一个单元格的宽度设置为 100px 。

然而，此列中的单元格太长，列宽度变得大于 100px 。如何禁用此扩展？

In my table I set the width of the first cell in a column to be 100px.
However, when the text in one of the cell in this column is too long, the width of the column becomes more than 100px. How could I disable this expansion?

推荐答案

我玩了一会儿，因为我有麻烦。

I played with it for a bit because I had trouble figuring it out.

您需要设置单元格宽度（th或td工作，我设置两者），并设置 table-layout 到 fixed 。由于某些原因，单元格的宽度似乎只保持固定，如果表的宽度设置，（我认为这是愚蠢，但whatev）。同样有用的是将overflow属性设置为hidden。

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (i think that's silly but whatev). Also useful is setting the overflow property to hidden.

你应该确保CSS的所有边框和尺寸。

You should make sure to leave all of the bordering and sizing for CSS, too.

好吧，这里是我有的。

Ok so here's what I have.

html：

<table>
   <tr>
      <th>header 1</th>
      <th>header 234567895678657</th>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>
   </tr>
</table>

CSS：

table{
    border: 1px solid black;
    table-layout: fixed;
    width: 200px;
}

th, td {
    border: 1px solid black;
    width: 100px;
}

这里是在JSFiddle

这家伙有一个类似的问题：表格单元格宽度 - 固定宽度，换行/截断长字

This guy had a similar problem: Table cell widths - fixing width, wrapping/truncating long words

这篇关于设置表列宽度常量，而不考虑其单元格中的文本量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！