html - 如何让表格单元格尽可能长，但小于最大宽度？

Question

我有一个动态表，我想让每行第一个单元格的宽度响应其内容的大小。目前，单元格的文本会随机中断，具体取决于数据。

我想要的是让单元格尽可能长，直到某个最大宽度，它实际上会中断。

例如，如果最大宽度为 200px:如果列的最大单元格为 100px，则该列将为 100px。如果它是 30px，则该列将是 30px。但是如果是300px，那么列就是200px，超过300pm的单元格会换行。

我已经尝试设置最小宽度和最大宽度，但是内容具有最小宽度并且不会根据需要扩展到 200 像素。

Answer 1

用 max-width 将单元格的内容包裹在一个元素中:

.cell {
  display: table-cell;
  border: 1px solid;
}
.contents {
  max-width: 200px;
}

<div class="cell">
  <div class="contents">
    Lorem ipsum.
  </div>
</div>
<br />
<div class="cell">
  <div class="contents">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula lorem, efficitur sit amet massa consectetur, gravida venenatis dui.
  </div>
</div>

最好不要直接在单元格上设置 max-width 因为 ( spec )

In CSS 2.1, the effect of min-width and max-width on tables, inline tables, table cells, table columns, and column groups is undefined.