无论单元格中的文本数量如何，都将表格列宽设置为常量？

Question

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

但是，当此列中的一个单元格中的文本太长时，列的宽度会变得超过 100px 。我怎样才能禁用此扩展？

原文由 Misha Moroshko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我玩了一会儿，因为我很难弄明白。

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed .出于某种原因，单元格宽度似乎只有在设置了表格宽度的情况下才会保持固定（我认为这很愚蠢，但无论如何）。

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

你应该确保也为 CSS 保留所有的边框和大小。

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

 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 中

这个人有一个类似的问题： Table cell widths - fixing width, wrapping/truncating long words

原文由 ptpaterson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

请参阅： http ://www.html5-tutorials.org/tables/changing-column-width/

在 table 标签之后，使用 col 元素。你不需要结束标签。

例如，如果您有三列：

 <table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>
  <tbody>
    ...
  </tbody>
</table>

原文由 Hyathin 发布，翻译遵循 CC BY-SA 3.0 许可协议