HTMLテーブルの列幅を固定する方法！width属性とtable-layoutプロパティ徹底解説

2024-07-27

HTMLテーブルの列幅を同じに保つ方法

方法 1: width 属性

width 属性を使って列幅をピクセル単位で指定できます。これは最も簡単な方法ですが、画面サイズや解像度によってレイアウトが崩れる可能性があります。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
</table>

th, td {
  width: 100px;
}

方法 2: % 単位

% 単位を使って列幅を指定できます。これは画面サイズに合わせて自動的に調整されるので、レスポンシブなレイアウトに適しています。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
</table>

th, td {
  width: 33.33%;
}

方法 3: table-layout プロパティ

table-layout プロパティを使って、テーブル全体の幅を固定し、列幅を自動的に調整できます。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
</table>

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

th, td {
  width: auto;
}

方法 4: flexbox

flexbox レイアウトを使って、列幅を柔軟に調整できます。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
</table>

table {
  display: flex;
}

th, td {
  flex: 1 1 auto;
}

方法 5: CSS Grid

CSS Grid レイアウトを使って、列幅を細かく調整できます。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
</table>

table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

th, td {
  text-align: center;
}

上記の5つの方法から、目的に合った方法を選択してください。

簡単なレイアウトには width 属性
レスポンシブなレイアウトには % 単位
テーブル全体の幅を固定したい場合は table-layout プロパティ
柔軟なレイアウトには flexbox
細かく調整したい場合は CSS Grid

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
</table>

th, td {
  width: 100px;
}

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
</table>

th, td {
  width: 33.33%;
}

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
</table>

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

th, td {
  width: auto;
}

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
</table>

table {
  display: flex;
}

th, td {
  flex: 1 1 auto;
}

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
</table>

table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

th, td {
  text-align: center;
}

実行方法

結果

col 要素

col 要素を使って、個々の列幅を指定できます。

<table>
  <col width="100px">
  <col width="100px">
  <col width="100px">
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
</table>

colgroup 要素

<table>
  <colgroup span="3" width="100px">
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>住所</th>
    </tr>
    <tr>
      <td>山田太郎</td>
      <td>30歳</td>
      <td>東京都渋谷区</td>
    </tr>
  </table>

JavaScript

JavaScriptを使って、列幅を動的に調整できます。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
</table>

const table = document.querySelector('table');
const ths = table.querySelectorAll('th');
const tds = table.querySelectorAll('td');

for (let i = 0; i < ths.length; i++) {
  ths[i].style.width = `${100 / ths.length}%`;
  tds[i].style.width = `${100 / ths.length}%`;
}