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

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

Barbara Streisand

リリース： 2024-10-27 14:37:01

オリジナル

479 人が閲覧しました

How can I set the width of table columns using CSS to achieve a specific layout with different percentages for each column?

テーブルの列幅の設定

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

<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 サイトの他の関連記事を参照してください。