1. ホーム
  2. html

[解決済み] 100%幅のテーブルがdivコンテナからはみ出る [重複]。

2022-04-29 23:06:56

質問

<余談
この質問には、すでにここで回答があります :
クローズド 1年前 .

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)を使用することも可能です。

どのように解決するのですか?

純粋に "make it fit in div" の観点から、テーブル・クラスに以下を追加します ( jsfiddle ):

table-layout: fixed;
width: 100%;

そうでなければ、固定レイアウトアルゴリズムがテーブルの幅を列全体に均等に配分します。

参考までに、テーブルレイアウトのアルゴリズムを以下に示します(強調は私)。

  • 固定( ソース )
    この(高速な)アルゴリズムでは、テーブルの水平方向のレイアウトは はコンテンツに依存しない テーブルの幅、列の幅、ボーダーまたはセルの間隔にのみ依存します。
  • 自動( ソース )
    このアルゴリズムでは(一般に2回以上パスする必要はない)、テーブルの幅は列の幅で与えられる。 [, コンテンツによって決定される] 。 (そして、間に挟まれた ボーダー ).



    [...] このアルゴリズムは,最終的なレイアウトを決定する前に,ユーザエージェントがテーブル内のすべてのコンテンツにアクセスする必要があり,1回以上のパスを要求する可能性があるので,非効率的であるかもしれない。

各アルゴリズムの詳細を見るには、ソースドキュメントをクリックしてください。