[CSS] tableの列幅を固定しつつ枠線が重ならないようにしたい

公開日:2018/08/22 更新日:2020/11/15

tableタグでテーブルを作っていると、幅をきっちり決めてスタイルしたいケースがあります。

table系のレイアウトは他の要素とは仕様が少し異なり、ただwidthを指定しても幅が決まらず、テーブルレイアウト用のスタイル指定が必要です。

サンプルコード

table {
    border-collapse: collapse;
    table-layout: fixed;
}
th,
td {
    padding: 10px;
    border: solid 1px #ccc;
}

仕組み、解説、補足など

「table-layout: fixed」で、widthが指定された列にはきちんと幅が反映されるようになります。

また、「border-collapse: collapse」で、重なった枠線が太く表示されなくなります。

見てくれをそれなりにしておくためにpaddingを指定するといいでしょう。

「table-layout: fixed」を設定しても幅が変わらない場合

colspanで列の結合をしていると「table-layout: fixed」を使っても列の幅が変わりません。

こういった場合は、colgroup、colタグを使って幅指定を行います。

html

<table>
    <colgroup>
        <col>
        <col>
        <col>
        <col>
    </colgroup>
    <thead>
        <tr>
            <th colspan="2">見出し1</th>
            <th>見出し2</th>
            <th>見出し3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>セル1</td>
            <td>セル2</td>
            <td>セル3</td>
            <td>セル4</td>
        </tr>
    </tbody>
</table>

CSS

col:nth-of-type(1) {
    width: 50px;
}
col:nth-of-type(2) {
    width: 100px;
}
col:nth-of-type(3) {
    width: 200px;
}
col:nth-of-type(4) {
    width: 300px;
}

更新履歴

2020/11/15：
「table-layout: fixed」を設定しても幅が変わらない場合の対処を追記。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。