ミギムキ

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

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; }

更新履歴

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

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

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

スポンサー広告