无论单元格中的文本数量如何，都将表格列宽设置为常量吗? [英] 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.出于某种原因，如果设置了表格宽度，单元格宽度似乎也只保持固定(我认为这很愚蠢，但无论如何).

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).

此外，将 overflow 属性设置为 hidden 以防止任何额外的文本从表格中出来也很有用.

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

您也应该确保为 CSS 保留所有边框和大小.

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

好的，这就是我所拥有的:

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>

这里是在 JSFiddle

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

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

这篇关于无论单元格中的文本数量如何，都将表格列宽设置为常量吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！