100% 宽度表格溢出 div 容器 [英] 100% width table overflowing div container

问题描述

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

.page {宽度:280px；边框:纯 1px 蓝色；}.my-table {自动换行:断字；}.my-table td {边框:实心 1px #333;}

<table class="my-table"><tr><th>标题文本</th>第 1 列第 2 列第 3 列第 4 列<th>标题文本</th></tr><tr><td>群岛是一个岛链或岛群.群岛一词源自希腊语 ἄρχι- – arkhi 和 πέλαγος – pélagosthrough 意大利群岛.在意大利语中，可能遵循古代传统，Arcipelago(源自中世纪希腊语 *ἀρχιπέλαγος)是爱琴海的专有名称，后来，用法转移到指爱琴海群岛(因为大海因其大量的岛屿).它现在用于指代任何岛屿群，或者有时指包含大量分散岛屿的海洋，例如爱琴海.[1] td .<td>一些数据</td><td>一些数据</td><td>一些数据</td><td>一些数据</td><td>群岛是一个岛链或岛群.群岛一词源自希腊语 ἄρχι- – arkhi 和 πέλαγος – pélagosthrough 意大利群岛.在意大利语中，可能遵循古代传统，Arcipelago(源自中世纪希腊语 *ἀρχιπέλαγος)是爱琴海的专有名称，后来，用法转移到指爱琴海群岛(因为大海因其大量的岛屿).它现在用于指代任何岛屿群，或者有时指包含大量分散岛屿的海洋，例如爱琴海.[1] td .</tr>

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

解决方案

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

表格布局:固定；宽度:100%；

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

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

• 已修复(来源)

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

• 自动(来源)

  在此算法(通常需要不超过两次通过)，表格的宽度由其列的宽度 [，由内容决定] 给出(并介入 borders).
  
  [...] 该算法可能效率低下，因为它需要用户代理在确定最终布局之前有权访问表格中的所有内容，并且可能需要多次通过.

点击源文档查看每个算法的细节.

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

.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.

解决方案

From a purely "make it fit in the div" perspective, add the following to your table class (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 contents of 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.

这篇关于100% 宽度表格溢出 div 容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！