☰

表の列幅の設定 質問する

tag-icon • tag-icon html css html-table
表の列幅の設定 質問する

受信トレイに使用される次のようなシンプルなテーブルがあります。

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

差出人と日付がページ幅の 15%、件名が 70% になるように幅を設定するにはどうすればよいでしょうか。また、表がページ幅全体を占めるようにしたいです。

ベストアンサー1

表の列の幅を設定するには、CSSwidthプロパティのcol要素width: 200px;幅の値は、ピクセル単位 ( ) または親要素の幅のパーセンテージ ( )で指定するのが一般的です。インライン属性width: 50%;の例:style

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    
    
    
    <!-- Put <thead>, <tbody>, and <tr>'s 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>

おすすめ記事