100%宽度的表溢出div容器

Question

我遇到的问题是html表溢出了它的父容器.我在这里设置了一个示例jsfiddle来说明问题.

如何强制标题文本和表格单元格文本以适合其容器的方式包装？我更喜欢仅CSS的方法,但如果绝对必要,我也愿意使用Javascript(或jQuery).

Answer 1

从纯粹的"使它适合div"的角度来看,将以下内容添加到您的表类(jsfiddle):

table-layout: fixed;
width: 100%;

根据需要设置列宽; 否则,固定布局算法将在您的列上均匀分布表格宽度.

为了快速参考,这里是表格布局算法,重点是我的:

• 固定(来源)

  使用这种(快速)算法,表格的水平布局不依赖于单元格的内容 ; 它只取决于表的宽度,列的宽度,边框或单元格间距.

• 自动(来源)

  在该算法中(通常需要不超过两次通过),表的宽度由其列的宽度[,由内容确定](和中间边界)给出.
  
  [...]此算法可能效率低,因为它要求用户代理在确定最终布局之前可以访问表中的所有内容,并且可能需要多次传递.

单击源文档以查看每种算法的详细信息.

Answer 2

尝试添加

word-break: break-all 

到你的表元素上的CSS.

这将使表格单元格中的单词断开,使得表格不会比其包含的div更宽,但表格列仍然是动态调整大小的. jsfiddle演示.

Answer 3

添加display: block;和overflow: auto;到.my-table.这将简单地切断280px超出您执行限制的任何内容.没有办法让这个要求"看起来很漂亮",因为pélagosthrough比这更宽泛的单词280px.