【CSS/html】tableのtd列幅を均等にする方法

tableは表を作るhtmlです。tdの内容量に応じて幅が自動で調整される特徴があります。

「内容量に関わらず表の列幅を均等にしたい！」

tableのtd列幅を均等にする方法を解説します。

【基本】tdにwidth:calc(100%/○)

tdにwidth:calc(100%/○)を指定すると均等幅にできます。

○には列数が入ります。

4列なら「width:calc(100%/4)」です。

これは親の幅に対してtdを4等分するという考え方です。

もちろん「width:25%」でもOKですが、calcを使うと、列数が増えたり、割り切れない数字の時に便利です。

1

セル2

セルセル3

セルセルセル4

<style>
.example td{
    width: calc(100%/4);
}
</style>
<table class="example" border="1">
    <tr>
        <td>1</td><td>セル2</td><td>セルセル3</td><td>セルセルセル4</td>
    </tr>
</table>

calcはCSSでも四則演算ができるものです。詳しくはこちら↓

この方法は後述する方法と違い、tableのwidth:autoを保つことができます。

【IEの場合】tableにwidth指定とtable-layout: fixed

IEではtdにwidthを指定しただけでは均等になりません。

tableにauto以外のwidthとtable-layout:fixedを指定しましょう。

ただし、IEもサポート切れ寸前で利用率が少ないためそこまで気にしなくてもいいかもしれません。

【裏技】tdにwidth:1%

tdにwidth:1%を指定するとtdの数に関わらずtd幅が均等になります。

1

セル2

セルセル3

セルセルセル4

<style>
.example2 td{
    width: 1%;
}
</style>
<table class="example2" border="1">
    <tr>
        <td>1</td><td>セル2</td><td>セルセル3</td><td>セルセルセル4</td>
    </tr>
</table>

tableの幅はwidthを指定しない場合は100%になります。

widthを指定すると指定した幅になります。

ちなみにIEでも効きます。

【まとめ】tableのtd幅を均等にする方法

	tdにwidth:calc(100%/○) ※○は列数	tdにwidth1%
列が増えたとき	○を修正	修正不要
tableが width:autoのとき	auto有効	100%になる
IE対応	tableに width指定と table-layout:fixed	効く

以上、tableのtd幅を均等にする方法でした。