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

Question

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

我想要的是让细胞长度达到最大宽度，直到它实际上会破裂。

例如，如果max-width是200px： 如果列的最大单元格为100px，则列为100px。 如果是30px，则列为30px。 但如果它是300px，那么该列将是200px，而超过300pm的单元将会断行。

我尝试过设置最小宽度和最大宽度，但内容的最小宽度不会根据需要扩展到200px。

Answer 1

使用max-width

将元素内容包装在元素中

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

最好不要直接在单元格上设置max-width，因为（spec）

  

在CSS 2.1中，min-width和max-width对表的影响，   内联表，表格单元格，表格列和列组   未定义。