テーブルの列幅を揃える方法

表などを作成する際に使用する「TABLE」タグ。
そんなテーブルの列幅を均等にする方法を解説します。

テーブルのサンプル

作成するのは下記の簡単なテーブル、中にはいっている文字数によって幅が変わっています。

<table>
    <tr>
        <th>国名</th>
        <th>人口</th>
        <th>説明</th>
    </tr>
    <tr>
        <td>日本</td>
        <td>1億人</td>
        <td>おもてなし</td>
    </tr>
    <tr>
        <td>アメリカ</td>
        <td>3億人</td>
        <td>アメリカンドリーム</td>
    </tr>
</table>

table {
  border-collapse: collapse;
  width:100%;
}
th {
  background-color:#e7e7e7;
}
th, td {
  border: solid 1px #000;
  padding:10px;
}

width で幅を揃える

widthを指定して、幅を指定する方法です。
calc関数を使用して 100% / 3(列数)　で幅を指定しております。

th {
  width:calc(100% / 3)
}

これできれいに３等分になりましたが、もし仮に列が増えた場合におかしなことになるので注意が必要です。

table-layout プロパティを使用

もう一つの方法が「table-layout: fixed」を使用する方法です。
table-layoutプロパティは、表のレイアウト方法を指定するプロパティです。
このプロパティを指定することで、列幅を決定する方法が変わります。

初期値は「auto」　セルの内容で自動的に変化します。

「fixed」は「width」が指定されている場合は、「width」の値。
指定がなければ列数に応じて均等に割り振られます。

table {
  table-layout: fixed
}

一列増えたとしても均等に表示されます。

また、仮に列の先頭だけ幅を狭くしたいという場合、先頭にだけ「width」を設定します。
すると、先頭の列は指定した幅、残りを列数に応じて均等に振り分けてくれます。

まとめ

以上　テーブルの列幅を均等にする方法でした。
tableタグは使う機会が減ったかもしれませんが、やはり表を作成するのはtableタグが一番作りやすいと思います。
ぜひ、参考にしてくださいませ。