CSS を使用してテーブルの列の幅を設定し、各列のパーセンテージが異なる特定のレイアウトを実現するにはどうすればよいですか?

テーブルの列幅の設定

このチュートリアルでは、目的のレイアウトを実現するためのテーブルの列の幅を設定するためのガイダンスを提供します。受信トレイとして使用される次のテーブルを考えてみましょう:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>

目標は、ページ幅の 15% を「差出人」列と「日付」列の両方に割り当て、70% を「件名」列に割り当てることです。カラム。さらに、表はページ幅全体にまたがる必要があります。

CSS width プロパティの使用

このレイアウトを実現するには、col 要素の CSS width プロパティを使用できます。 。このプロパティを使用すると、列の幅をピクセル単位または親要素の幅のパーセンテージで指定できます。

インライン スタイル属性を使用した次の例を考えてみましょう。

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;"></col>
       <col span="1" style="width: 70%;"></col>
       <col span="1" style="width: 15%;"></col>
    </colgroup>

    <thead>
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

これらの幅を指定すると、表はページ幅全体を占め、列は指定されたパーセンテージに従って比例したサイズに調整されます。このアプローチにより、ページ幅が変わっても柔軟な列幅が可能になり、一貫したレイアウトが確保されます。

以上がCSS を使用してテーブルの列の幅を設定し、各列のパーセンテージが異なる特定のレイアウトを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。