I am having issues with an html table that is overflowing it's parent container. I have setup a sample jsfiddle here to illustrate the problem.
我遇到了一个html表溢出的问题，它是父容器。我在这里设置了一个示例jsfiddle来说明这个问题。
How can I force both the header text and the table cell text to wrap in a way that it will fit in its container properly? I would prefer a CSS only method but am also open to using Javascript (or jQuery) if absolutely necessary.
如何强制头文本和表单元格文本以适合其容器的方式包装?我更喜欢只使用CSS的方法，但如果绝对需要的话，我也愿意使用Javascript(或jQuery)。
5 个解决方案
#1
#2
39
Try adding
尝试添加
word-break: break-all
to the CSS on your table element.
到表格元素上的CSS。
That will get the words in the table cells to break such that the table does not grow wider than its containing div, yet the table columns are still sized dynamically. jsfiddle demo.
这将使表单元格中的单词中断，使表不会比包含的div更宽，但是表列仍然是动态大小的。jsfiddle演示。
#3
11
Add display: block; and overflow: auto; to .my-table. This will simply cut off anything past the 280px limit you enforced. There's no way to make it "look pretty" with that requirement due to words like pélagosthrough which are wider than 280px.
添加显示:块;和溢出:汽车;.my-table。这将简单地将超过280px限制的内容删除。因为像pelagosthrough这样的单词比280px宽，所以没有办法让它看起来“漂亮”。
#4
1
Well, given your constraints, I think setting overflow: scroll; on the .page div is probably your only option. 280 px is pretty narrow, and given your font size, word wrapping alone isn't going to do it. Some words are just long and can't be wrapped. You can either reduce your font size drastically or go with overflow: scroll.
考虑到你的限制，我认为设置溢出:滚动;在。page div中可能是您唯一的选择。280像素很窄，考虑到你的字体大小，仅用文字包装是不行的。有些字太长了，不能包装。您可以大幅减少字体大小，也可以使用overflow: scroll。
#5
0
Try adding to td:
尝试添加道明:
display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify
overflowed tds will align with new row.
溢出的tds将与新行对齐。
#1
154
From a purely "make it fit in the div" perspective, add the following to your table class (jsfiddle):
从纯粹的“使它适合div”的角度，向您的表类(jsfiddle)添加以下内容:
table-layout:fixed;
width: 100%;
See fixed versus automatic table layout.
参见固定与自动表布局。
#2
39
Try adding
尝试添加
word-break: break-all
to the CSS on your table element.
到表格元素上的CSS。
That will get the words in the table cells to break such that the table does not grow wider than its containing div, yet the table columns are still sized dynamically. jsfiddle demo.
这将使表单元格中的单词中断，使表不会比包含的div更宽，但是表列仍然是动态大小的。jsfiddle演示。
#3
11
Add display: block; and overflow: auto; to .my-table. This will simply cut off anything past the 280px limit you enforced. There's no way to make it "look pretty" with that requirement due to words like pélagosthrough which are wider than 280px.
添加显示:块;和溢出:汽车;.my-table。这将简单地将超过280px限制的内容删除。因为像pelagosthrough这样的单词比280px宽，所以没有办法让它看起来“漂亮”。
#4
1
Well, given your constraints, I think setting overflow: scroll; on the .page div is probably your only option. 280 px is pretty narrow, and given your font size, word wrapping alone isn't going to do it. Some words are just long and can't be wrapped. You can either reduce your font size drastically or go with overflow: scroll.
考虑到你的限制，我认为设置溢出:滚动;在。page div中可能是您唯一的选择。280像素很窄，考虑到你的字体大小，仅用文字包装是不行的。有些字太长了，不能包装。您可以大幅减少字体大小，也可以使用overflow: scroll。
#5
0
Try adding to td:
尝试添加道明:
display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify
overflowed tds will align with new row.
溢出的tds将与新行对齐。