一个特定列的灵活列宽

Question

我有一个表格，其单元格内容不应包裹在多行上。

我希望表格适应显示某些单元格的完整内容（id，value和actions，在下面的示例中）。

我希望其他单元格占用剩余空间并隐藏溢出。

你认为这是可能的吗？

这是一个小例子。

• 没有CSS：一切都包裹在2行上，这是不行的。
• No Wrap：表格变得太宽，我想截断描述单元格。

https://jsfiddle.net/user280767/pfeL3bwk/

table.ex-2 td {
  white-space: nowrap;
}

table.ex-2 td.descr {
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 1

只需使用table-layout: fixed;。

请参阅修改后的JSFiddle。

MDN Article on table-layout

为表格设置固定宽度后，您可以设置列宽，例如，使用col标记或将宽度直接设置为th。

请参阅此JSFiddle。

如果您希望table使用所有宽度，则只需将其设为width: 100%;或保留默认值（无宽度规则）。