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

100% width table overflowing div container

提问by Victor

I am having issues with an html table that is overflowing it's parent container.

我遇到了溢出父容器的 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>

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）。

回答by canon

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%;

Set your column widths as desired; otherwise, the fixed layout algorithm will distribute the table width evenly across your columns.

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

For quick reference, here are the table layout algorithms, emphasis mine:

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

• Fixed (source)

  With this (fast) algorithm, the horizontal layout of the table does not depend on the contentsof the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

• Automatic (source)

  In this algorithm (which generally requires no more than two passes), the table's width is given by the width of its columns [, as determined by content](and intervening borders).
  
  [...] This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass.

• 固定（来源）

  使用这种（快速）算法，表格的水平布局不依赖于单元格的内容；它仅取决于表格的宽度、列的宽度以及边框或单元格间距。

• 自动（来源）

  在这个算法中（通常需要不超过两次通过），表格的宽度由其列的宽度[，由内容决定]（和中间边界）给出。
  
  [...] 该算法可能效率低下，因为它要求用户代理在确定最终布局之前有权访问表中的所有内容，并且可能需要多次通过。

Click through to the source documentation to see the specifics for each algorithm.

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

回答by Jon Schneider

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 演示。

回答by David Titarenco

Add display: block;and overflow: auto;to .my-table. This will simply cut off anything past the 280pxlimit you enforced. There's no way to make it "look pretty" with that requirement due to words like pélagosthroughwhich are wider than 280px.

添加display: block;和overflow: auto;到.my-table。这只会切断280px超出您强制执行的限制的任何内容。由于诸如pélagosthroughwhich 之类的词比280px.

回答by U_R_Naveen UR_Naveen

Try adding to td:

尝试添加到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 将与新行对齐。

回答by Sugeng Sulistiyawan

update your CSS to the following: this should fix

将您的 CSS 更新为以下内容：这应该可以解决

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

回答by Peter Lyons

Well, given your constraints, I think setting overflow: scroll;on the .pagediv 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.

好吧，鉴于您的限制，我认为overflow: scroll;在.pagediv上设置可能是您唯一的选择。280 px 非常窄，考虑到您的字体大小，仅靠自动换行是行不通的。有些词只是长，无法包装。您可以大幅减小字体大小或使用溢出：滚动。