100％宽度的表格溢出div容器[重复]

Question

这个问题在这里已经有了答案：

表格溢出 div 10 个答案

11 个月前关闭。

我遇到了溢出其父容器的 html 表的问题。

 .page { width: 280px; border:solid 1px blue; }.my-table { word-wrap: break-word; }.my-table td { border:solid 1px #333; }

 <div class="page"> <table class="my-table"> <tr> <th>Header Text</th> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> <th>Header Text</th> </tr> <tr> <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td> <td>some data</td> <td>some data</td> <td>some data</td> <td>some data</td> <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td> </tr> </table> </div>

如何强制 header 文本和表格单元格文本以适合其容器的方式换行？ 我更喜欢仅使用 CSS 的方法，但如果绝对必要，我也愿意使用 Javascript（或 jQuery）。

Answer 1

从纯粹的“使其适合 div”的角度来看，将以下内容添加到您的表 class ( 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宽，因此没有办法让它“看起来很漂亮”。

Answer 4

尝试添加到td ：

display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify

溢出的 tds 将与新行对齐。

Answer 5

将您的 CSS 更新为以下内容：这应该修复

.page {
    width: 280px;
    border:solid 1px blue;
    overflow-x: auto;
}

Answer 6

好吧，鉴于您的限制，我认为设置overflow: scroll; 在.page div 上可能是您唯一的选择。 280 像素非常窄，考虑到您的字体大小，仅靠自动换行是行不通的。 有些话很长，不能换行。 您可以大幅减小字体大小或 go 溢出：滚动。