100％宽度表溢出div容器

我有一个溢出它的父容器的HTML表的问题。 我在这里设置了一个示例jsfiddle来说明问题。

我怎样才能强制标题文本和表格单元格文本以适当的方式适应其容器中的方式？ 我更喜欢一个CSS的方法，但也打开使用JavaScript（或jQuery），如果绝对必要的。

Answer 1

从纯粹的“使其适合div”的angular度来看，添加以下到您的表类（ jsfiddle ）：

 table-layout:fixed; width: 100%; 

_{请参阅固定与自动表格布局。}

Answer 2

尝试添加

 word-break: break-all 

到你的表格元素上的CSS。

这将使表格单元格中的单词断开，使得表格不会比其包含的div更宽，但表格列仍是dynamicresize的。 jsfiddle演示 。

Answer 3

添加display: block; 并overflow: auto; 到.my-table 。 这将简单地切断超过您执行的280px限制。 由于像pélagosthrough这样的宽度超过280px单词，没有办法让它“看起来很漂亮”。

Answer 4

那么，考虑到你的限制，我认为设置overflow: scroll; 在.page div可能是你唯一的select。 280像素是相当狭窄的，并给你的字体大小，单词包装是不会做到这一点。 有些字只是很长，不能被包装。 你可以减less你的字体大小，或者用overflow：scroll。