HTMLとCSSでtable（テーブル）の列幅を調整する方法

2025.01.19

Web制作において、テーブルを使ったデータの表示は一般的ですが、特に列ごとの幅を調整する場合、適切な手法を知っておくことが重要です。

本記事では、HTMLとCSSを使った列幅の指定方法を、基本から応用まで解説します。レスポンシブデザインやデータ表示の最適化にも役立つ実用例を紹介します。

この記事でわかること

HTMLとCSSを使ってテーブルの列幅を調整する具体的な方法がわかる
table-layout: fixed;や<colgroup>などのCSSプロパティやタグの使い方が理解できる
レスポンシブデザインに対応したテーブル作成のポイントが学べる

テーブル幅の基本的な考え方

テーブル幅を調整する際、以下の3つの要素を考慮する必要があります。

テーブル全体の幅：ページデザインに合わせてテーブルが画面幅に調整されるかどうか
列ごとの幅：データ量に応じた幅を指定し、情報を見やすくする
固定幅か可変幅か：データ内容に応じて列幅を変えるか、一定の幅を保つか

HTMLだけで列幅を指定する方法

HTMLでは、<th>や<td>に直接width属性を指定して列幅を調整することが可能です。

列1	列2	列3
データ1	データ2	データ3

HTML

<table border="1">
  <tr>
    <th width="150">列1</th>
    <th width="200">列2</th>
    <th width="250">列3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
</table>

ただし、width属性はHTML5で非推奨となっているため、現在ではCSSを使った指定方法が主流です。

CSSを使った列幅の指定方法

CSSでテーブル全体の幅を指定する

以下は、CSSを使ってテーブル全体の幅を指定する例です。

列1	列2	列3
データ1	データ2	データ3

HTML

<table border="1" class="table-basic">
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
</table>

<style>
  .table-basic {
    width: 100%;
    border-collapse: collapse;    
  }
</style>

このコードでは、テーブル全体の幅を100%に設定し、親要素に応じて幅が調整されます。

<colgroup>タグを使った列幅の指定

列ごとの幅を明示的に指定したい場合、<colgroup>タグを利用すると簡潔に設定できます。

列1	列2	列3
データ1	データ2	データ3

HTML

<table class="colgroup-table">
  <colgroup>
    <col style="width: 20%;">
    <col style="width: 50%;">
    <col style="width: 30%;">
  </colgroup>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
</table>

テーブルレイアウトを固定する方法

このように文字数によって列幅が変わってしまうことがありますよね。

列1	列2	列3
１２３	１２３４５６７８９０	１２３４５６

そんなときには、table-layout: fixed;を使います。データの内容に関係なく、指定した幅を保つことが出来ます。

列1	列2	列3
１２３	１２３４５６７８９０	１２３４５６

HTML

<table class="fixed-layout">
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>１２３</td>
    <td>１２３４５６７８９０</td>
    <td>１２３４５６</td>
  </tr>
</table>

<style>
  .fixed-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  .fixed-layout th, .fixed-layout td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #ccc;
  }
</style>

table-layout: fixed;を使用することで、列幅が固定され、データ量に影響されずに整ったレイアウトが実現します。

`nth-child`セレクタを活用した列幅の指定

CSSのnth-childセレクタを使うことで、特定の列に幅を指定することも可能です。

列1	列2	列3
データ1	データ2	データ3

HTML

<table class="nth-child-example">
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
</table>

<style>
  .nth-child-example th:nth-child(1), 
  .nth-child-example td:nth-child(1) {
    width: 25%;
  }
  .nth-child-example th:nth-child(2), 
  .nth-child-example td:nth-child(2) {
    width: 50%;
  }
  .nth-child-example th:nth-child(3), 
  .nth-child-example td:nth-child(3) {
    width: 25%;
  }
</style>