ホームへ

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

2022年03月31日

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以外のwidthtable-layout:fixedを指定しましょう。

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

【裏技】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幅を均等にする方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ