100%宽度的表格溢出div容器

Question

我遇到了一个问题，就是一个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>

如何强制标题文本和表格单元格文本以适合其容器的方式换行？我希望使用 CSS-only 方法，但如果绝对必要，也可以使用 Javascript (或 jQuery)。

- Victor

Answer 1

从纯粹的“让它适应div”角度来看，将以下内容添加到您的表格类中 (jsfiddle):

table-layout: fixed;
width: 100%;

根据需要设置您的列宽；否则，固定布局算法将均匀分配表格宽度到各个列。

以下是表格布局算法的快速参考，重点是：

• 固定布局 (来源)

  使用此（快速）算法，表格的水平布局不取决于单元格内容；它只取决于表格的宽度、列的宽度和边框或单元格间距。

• 自动布局 (来源)

  在此算法中（通常不需要超过两个步骤），表格的宽度由其列的宽度[根据内容确定]（以及相邻的边框）给出。
  
  [...] 此算法可能效率低下，因为它要求用户代理在确定最终布局之前访问表格中的所有内容，并且可能需要多次传递。

点击源文件以查看每种算法的具体信息。

- canon

Answer 2

尝试添加

word-break: break-all 

将CSS应用到您的表格元素中。

这样可以使表格单元格中的文字换行，以使表格不会比其包含的div更宽，但表格列仍然可以动态调整大小。jsfiddle演示。

- Jon Schneider

---

使用 word-wrap: break-word; 会让效果更好。 - Apolo

@Apolo - 同意！我在我的原始jsfiddle演示中也使用了它（请参见上面答案正文中的链接）。 - Jon Schneider

闪烁浏览器具有最佳效果的“word-break: break-word”。 - Volvox

最好使用overflow-wrap属性，因为它是标准化的。 - Romko

Answer 3

将.my-table添加display: block;和overflow: auto;。这将简单地截断任何超过你强制执行的280px限制的内容。由于像“pélagosthrough”这样比280px宽的单词，因此没有办法使其“看起来漂亮”。

- David Titarenco

---

仅适用于我的情况：我需要表格适应所有父元素的宽度（在高分辨率下），因此我将表格包围在一个 div 中，并将您的样式应用于其中。现在，表格尝试使用所有父元素的宽度，但如果表格内容溢出，则会出现滚动条。 - José Manuel Blasco

这个答案可以让<table>保持在<fieldset>内。 - Jose Manuel Abarca Rodríguez

Answer 4

尝试在中添加内容：

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

溢出的td将与新行对齐。

- U_R_Naveen UR_Naveen

Answer 5

鉴于您的限制，我认为在 .page div 上设置 overflow: scroll; 可能是您唯一的选择。280像素非常窄，考虑到您的字体大小，仅使用换行是不够的。有些单词很长，无法换行。您可以大幅减小字体大小或选择 overflow: scroll。

- Peter Lyons

Answer 6

更新你的CSS如下：这应该解决问题。

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

- Sugeng Sulistiyawan