换行长表格单元格，同时保持其他单元格的动态宽度答案

【问题标题】：Word-wrapping a long table cell while maintaining dynamic widths in others换行长表格单元格，同时保持其他单元格的动态宽度
【发布时间】：2011-06-01 20:49:46
【问题描述】：

我有一张表格，其中一个单元格中有一条长线。我需要拆分长线，以免表格宽度超过 100%。我发现通过添加table-layout: fixed 和word-wrap: word-break，它将包裹长单元格。但是，使用table-layout 的副作用是它会导致所有列的宽度相同。

你可以在这里看到一个例子：

http://jsfiddle.net/RYdLd/2/

如何使第一列的宽度自动调整大小以仅适合其内容？（即在这个例子中，它应该足够宽以显示该列中的1 和2。）

表格中的数据将动态加载，因此硬编码宽度值的解决方案并不好，因为无法提前知道列的宽度。我唯一的选择是使用<table>，我不能使用<div> 或其他一些元素。

【问题讨论】：

标签： css html-table word-wrap column-width

【解决方案1】：

根据official specification，当你使用固定的table-layout时，第一行的列宽决定了整个表格的列宽。如果没有定义它们，它将平均分配列宽。

由于似乎没有其他选择，我最终使用了以下方法：

在table-layout 设置为自动时加载表中的数据。
读取我想要动态的列的宽度。
将这些列宽设置为其当前值。
将table-layout 更改为固定。

这是一个不完美的例子（宽度会减少一点）：

http://jsfiddle.net/RYdLd/7/

【讨论】：

那么没有Javascript就没有办法做到这一点吗？伤心:(

【解决方案2】：

我在解决同样的问题时发现了这一点：

在元素上设置断词完全对应于在该元素内包含的文本的每个字符之间插入一个零宽度空格。

除了这实际上适用于普通的动态表！

这个解决方案非常快，因为它不需要任何 Javascript。

（但是，如果需要，它可以从 Javascript 中使用。查找所有带有断词的单元格，抓取所有子文本节点，并在每个字符之间插入一个零宽度的空格。即使这样，脚本也只会运行一次页面加载，所以这应该仍然非常高效。）

零宽度空间是&#8203;

【讨论】：

此does work 用于演示，但如果用户尝试复制/粘贴文本（例如到记事本中），也会复制空格。
另外<wbr> 会起作用，它的行为与
回复：复制/粘贴这些字符在使用 Chrome 59 时不会被复制。

【解决方案3】：

你可以使用：word-wrap css style 来打断长句。

word-wrap: break-word

【讨论】：

虽然这确实解决了滚动条问题，但并没有解决问题所在（即第一列仍然太宽）：jsfiddle.net/RYdLd/2
向第一个表格单元格添加宽度属性，例如：1
问题是它的内容是动态加载的，所以不知道应该是什么宽度。
当您不指定宽度时，单元格会均匀分布（宽度相同）
看看这个例子：jsfiddle.net/RYdLd/4 你可以看到第一列是自动调整大小以适应它的内容。

【解决方案4】：

在 DIV 和 固定表格 (table-layout:fixed) 中处理/包装长字很容易 - 只需应用 CSS3 word-wrap:break-words.

在动态表中，上面的属性只完成了一半的工作。我们还需要帮助浏览器找到断点。

更详细的解释可以看文章Wrap long words within dynamic tables。

【讨论】：