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

Posted 2023-03-05

【中文标题】100％宽度的表格溢出div容器[重复]

【英文标题】：100% width table overflowing div container [duplicate]

【发布时间】：2011-09-29 21:04:23

【问题描述】：

我遇到了一个 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 的方法，但如果绝对必要，我也愿意使用 javascript（或 jQuery）。

【参考方案1】：

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

【讨论】：

就我的情况而言：我需要表格来适应所有父宽度（在高分辨率下），所以我用 div 包围了表格并将您的样式应用到它上面。现在表格尝试使用所有父级的宽度，但如果表格内容溢出，它会出现滚动条。

此答案可将<table> 保留在<fieldset> 中。

【参考方案2】：

从纯粹的“使其适合 div”的角度来看，将以下内容添加到您的表类 (jsfiddle)：

table-layout: fixed;
width: 100%;

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

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

已修复 (source)

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

自动 (source)

在此算法中（通常需要不超过两次通过），表格的宽度由其列的宽度[，由内容确定] （并干预borders）。[...] 此算法可能效率低下，因为它要求用户代理在确定最终布局之前有权访问表中的所有内容，并且可能需要更多不止一次。

点击源文档查看每种算法的详细信息。

【参考方案3】：

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

【参考方案4】：

尝试添加

word-break: break-all 

到表格元素上的 CSS。

这将使表格单元格中的单词中断，以使表格不会比其包含的 div 更宽，但表格列仍会动态调整大小。 jsfiddle demo.

【讨论】：

word-wrap: break-word; 会更好

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

闪烁浏览器有word-break: break-word，效果最好。

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

【参考方案5】：

尝试添加到td：

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

溢出的 tds 将与新行对齐。

【参考方案6】：

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

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