CSS を使用して HTML テーブル構造の列幅を正確に制御するにはどうすればよいですか?

テーブル構造の列幅の設定

さまざまな Web 開発シナリオでは、最適なプレゼンテーションを実現するためにテーブルの列の幅を正確に制御する必要があります。受信トレイとして使用される次の単純な HTML テーブルを考えてみましょう:

<code class="html"><table border="1">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table></code>

私たちの目標は、From 列と Date 列の幅をページ幅の 15% に設定し、Subject 列が残りの 70% を占めることです。 %。さらに、テーブル自体をページ幅全体に広げたいと考えています。

これに対処するには、col 要素内の CSS width プロパティを利用できます。このプロパティを使用すると、ピクセルやパーセンテージなどのさまざまな単位を使用して個々の列の幅を指定できます。

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

    <!-- Table body and rows -->
</table></code>

この例では、colgroup コンテナー内に 3 つのcol 要素のセットを作成します。各 Col 要素はテーブルの列を表し、インライン CSS スタイルを使用して希望の幅が割り当てられます。パーセンテージを指定すると、列の幅がテーブル全体の幅に比例して調整されます。

以上がCSS を使用して HTML テーブル構造の列幅を正確に制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。