受信箱スタイルのレイアウトの表の列幅を設定するにはどうすればよいですか?

テーブルの列幅の設定

視覚的に魅力的で機能的なテーブルを作成するには、多くの場合、その列の幅のカスタマイズが必要になります。基本的な受信トレイ スタイルのテーブルの場合、目標は、「From」、「Subject」、および「Date」列に特定の幅を設定し、これらの列がページ幅の異なる割合を占めるようにすることです。

このカスタマイズを実現するには、CSS の width プロパティ を col 要素 と組み合わせて使用​​します。この要素は、列のレイアウトを定義する colgroup 要素内にあります。各列に幅の値を割り当てることで、そのサイズを制御できます。

インライン CSS 属性を使用した例を次に示します。

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    <!-- Column headers (<thead>) and body rows (<tbody>) go here -->
    <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>

このコード スニペットは、ページ幅全体を占めるようにテーブルを設定します。 、特定のパーセンテージで 3 つの列を定義します:

• "From": ページ幅の 15%
• "Subject": ページ幅の 70%
• 「日付」: ページ幅の 15%

以上が受信箱スタイルのレイアウトの表の列幅を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。