問題 × 解決策

テーブルのセルの幅を均等にする方法

問題

テーブルのセルの幅を均等にするには?

解決策

大元のテーブルに「table-layout: fixed;」を設定する。

 

内容に限らず同じ幅にしたい。

テーブルのセルの幅は、それぞれ内容に応じた幅になります。
ですが場合によっては内容に限らず同じ幅にしたい場合があると思います。
そんな時のために今回はテーブルのセルの幅を均等にする方法をご紹介します。

DEMOはこちら

項目 項目 項目 項目
内容 内容が入ります。内容が入ります。内容が入ります。内容が入ります。 内容 内容が入ります。
内容 内容が入ります。 内容 内容が入ります。

HTMLはこちら

<table class="tablefixed">
    <thead>
        <tr>
            <th scope="col">項目</th>
            <th scope="col">項目</th>
            <th scope="col">項目</th>
            <th scope="col">項目</th>
        </tr>
	</thead>
    <tbody>
        <tr>
            <td>内容</td>
            <td>内容が入ります。内容が入ります。内容が入ります。内容が入ります。</td>
            <td>内容</td>
            <td>内容が入ります。</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容が入ります。</td>
            <td>内容</td>
            <td>内容が入ります。</td>
        </tr>
    </tbody>
</table>

CSSはこちら

テーブルに対し、「table-layout: fixed;」と設定することで、セルの幅が均等になります。


table.tablefixed{
	width: 100%;
	table-layout: fixed;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

18 + 19 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧