【HTML&CSS】tableのセル幅を均等にする方法

HTMLで作成したtableのセルの幅を均等にしたい。

HTMLで作成したtableの各セルの横幅は、デフォルトだと文字幅に依存するため、均等ではありません。

そのため、CSSでの調整が必要です。

この記事では、tableセルの横幅を均等に配置するためのCSSや、使い方の注意点について解説します。

【HTML&CSS】tableのセル幅を均等にする方法
- table-layoutの使い方と注意点
- table-layoutの便利な使い方

【HTML&CSS】tableのセル幅を均等にする方法

冒頭でお伝えした通り、tableのセル幅はデフォルトだと｢文字幅｣に依存するため、均等ではありません。

下はサンプルですが、各セル幅はバラバラですね。

ちなみに、上記tableのコードはこちらになります。

HTML

<table>
   <thead>
      <tr>
         <th></th>
         <th>当社</th>
         <th>株式会社○○○○商事</th>
         <th>(有)△△</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th>価格</th>
         <td>18000円</td>
         <td>20000円</td>
         <td>30000円</td>
      </tr>
      <tr>
         <th>追加料金</th>
         <td>なし</td>
         <td>あり</td>
         <td>あり</td>
      </tr>
      <tr>
         <th>店舗数</th>
         <td>全国200店舗</td>
         <td>関東のみ</td>
         <td>関西のみ</td>
      </tr>
   </tbody>
</table>

CSS

table {
  border-collapse: collapse;
}

th,
td {
  font-size: 20px;
  border: 1px solid #333;
  padding: 20px;
  text-align: center;
}

thead th {
  background-color: #ffcc99;
}

tableセルの横幅を均等にするには、CSSのtable-layoutプロパティを使い、値をfixedにします。

table-layout: fixed;: ：tableのセル幅を均等にする

table-layoutの使い方と注意点

table-layoutは｢table要素｣に使います。

各セル（thやtd）ではないことに注意しましょう。

また、tableの横幅が必須なので、こちらも合わせてご注意ください。

table {
  width: 800px; /*横幅は必須*/
  table-layout: fixed;
}

なお、tableの横幅は｢％｣でも大丈夫です。

table {
  width: 80%;
  table-layout: fixed;
}

すると、table各セルの横幅が均等になります。

なお、均等配置を解除したいときは、値をautoとします。

table {
  table-layout: auto;
}

table-layoutの便利な使い方

中には｢1列だけ横幅を固定して、残りのセル幅を均等にしたい｣というケースがあると思います。

table-layoutはその点で非常に使い勝手がよくて、1列だけ固定値を指定すると、残りのセルを自動で均等に配置してくれます。

たとえば、先ほどのtableのtable-layoutをfixed（均等配置）にしたまま、1列目だけ｢150px｣に固定してみましょう。

table {
  width: 1000px;
  table-layout: fixed;
}

/*1列目だけ固定値150pxに変更*/
thead th:nth-child(1),
tbody th {
  width: 150px;
}

すると、1列目だけ150pxで固定され、残りが均等に分配されます。

このように、table-layoutは非常に使い勝手のいいCSSプロパティなので、使い方を押さえておきましょう。