html - 如何确保表格永远不会比包含它的 div 宽？

Question

我有一个包含一个表的 div，它有另一个带有动态变化文本的 div。div 有样式

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

所以我希望当文本比 div 宽时它会在末尾显示“...”，但实际上，表格宽度会比容器 div 大，这真的很奇怪。

如果我以 px 或 pt 为单位设置单元格最大宽度，其中包含带文本的 div，则可以正常工作，但这不是一个选项。

如何设置表格以跟随容器 div 的宽度并且永远不会大于该宽度？

一些示例代码是in a JSFiddle .

Answer 1

去掉 #c121 div 的宽度，除非你坚持要它。

表格只符合它们的内容，而不是它们的包装器。

既然是生成标记，你能不能在元素上添加一些class或properties？