对长表格单元格进行自动换行，同时保持其他表格单元格的动态宽度
我有一张表格，其中一个单元格中有一条长线。我需要将长线分开，这样就不会导致表格宽度超过 100%。我发现通过添加table-layout:fixed和word-wrap:word-break，它会包裹长单元格。但是，使用 table-layout 的副作用是它会导致所有列具有相同的宽度。
您可以在此处查看示例：
如何我可以使第一列的宽度自动调整大小以仅适合其内容吗？ （即在本例中，它的宽度应该足以显示该列中的 1 和 2。）
表中的数据将动态加载，因此解决方案哪个硬编码宽度值不好，因为无法提前知道列应该有多宽。我唯一的选择是使用 ，我不能使用 或其他元素。
I have a table which has a long line in one of its cells. I need the long line to be split so that it doesn't cause the table to be more than 100% wide. I found that by adding table-layout: fixed and word-wrap: word-break, it will wrap the long cell. However, a side effect of using table-layout is that it causes all columns to have the same width.
You can see an example of that here:
How can I make the first column's width auto size to fit only its contents? (i.e. In this example, it should be just wide enough to show the 1 and 2 in that column.)
The data in the table will be loaded dynamically, so a solution which hard codes width values is not good because there's no way to know in advance how wide a column should be. My only option is to use a <table>, I can't use a <div> or some other element.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
根据官方规范，当您使用固定
table-layout，第一行的列宽决定了整个表格的列宽。如果没有定义它们，它将均匀分布列宽。由于似乎没有任何其他选项，我最终使用了以下方法：
table-layout设置为 auto 时加载表中的数据。table-layout更改为固定。这是一个不完美的示例（宽度减少了一点）：
http://jsfiddle.net/ RYdLd/7/
According to the official specification, when you use a fixed
table-layout, the first row's column widths determine the entire table's column widths. If none of them are defined, it will distribute the column widths evenly.Since there doesn't seem to be any other option, I ended up using the following method:
table-layoutis set to auto.table-layoutto fixed.Here's an example which isn't perfect (the width gets decreased by a bit):
http://jsfiddle.net/RYdLd/7/
我在解决同样的问题时发现了这一点：
在元素上设置断词完全对应于在该元素内包含的文本的每个字符之间插入零宽度空格。
除了这实际上适用于正常的动态表！
该解决方案非常快，因为它不需要任何 JavaScript。
（但是，如果需要，可以从 Javascript 使用它。查找所有带有断词的单元格，抓取所有子文本节点，并在每个字符之间插入零宽度空格。即使如此，脚本在页面加载期间也只会运行一次，所以这应该仍然具有极高的性能。）
零宽度空间是
I discovered this while wrestling with the same problem:
Setting break-word on an element corresponds exactly to inserting a zero-width space between every character of the text contained inside that element.
Except that this actually works with normal, dynamic tables!
This solution is very fast, since it does not require any Javascript.
(It could however be used from Javascript if desired. Find all cells with break-word, grab all the child text nodes, and insert a zero-width space between every character. Even then, the script would run only once during page load, so this should still be extremely performant.)
Zero-width space is
您可以使用：word-wrap css样式来打破长句子。
You can use: word-wrap css style to break the long sentences.
在 DIV 和 固定表格 (table-layout:fixed) 中处理/换行长单词很容易 - 只需应用 CSS3 word -wrap:断词。
在上面的动态表中，属性只完成了一半的工作。我们还需要帮助浏览器找到断点。
更详细的解释可以在文章在动态表格中换行长单词中找到。
It's easy to handle/wrap long words in DIVs and fixed tables (table-layout:fixed) - just apply CSS3 word-wrap:break-words.
Within dynamic tables above property does only half of the work. We need additionally to help the browsers find break points.
A bit more detailed explanation can be found in the article Wrap long words within dynamic tables.