html - 无论单元格中的文本数量是多少，都将表格列宽设置为常量？(Set the table column width constant regardless of the amount of text in its cells?)

Question

In my table I set the width of the first cell in a column to be 100px .

(在我的表中，我将列中第一个单元格的宽度设置为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 .

(但是，当此列中某个单元格中的文本太长时，列的宽度将变得超过100px 。)

How could I disable this expansion?

(我怎么能禁用这个扩展？)

  ask by Misha Moroshko translate from so

Answer 1

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

(我玩了一会儿，因为我很难搞清楚。)

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed .

(您需要设置单元格宽度（ th或td工作，我设置两者）并将table-layout设置为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).

(出于某种原因，如果设置了表格宽度，单元格宽度似乎只保持固定（我认为这很愚蠢但是whatev）。)

Also, it is useful to set the overflow property to hidden to prevent any extra text from coming out of the table.

(此外，将overflow属性设置为hidden是有用的，以防止任何额外的文本从表中出来。)

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

(你应该确保留下CSS的所有边界和大小。)

Ok so here's what I have:

(好的，这就是我所拥有的：)

 table { border: 1px solid black; table-layout: fixed; width: 200px; } th, td { border: 1px solid black; width: 100px; overflow: hidden; } 

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

Here it is in JSFiddle

(这是JSFiddle)

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

(这家伙有类似的问题： 表格单元格宽度 - 固定宽度，包装/截断长单词)