CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtable-layoutプロパティでテーブルレイアウトを制御する方法

HTMLテーブルのレイアウトを細かく制御したい場合は、CSSのtable-layoutプロパティを使用します。このプロパティを指定することで、列幅の計算方法をコントロールでき、テーブルの見た目や描画パフォーマンスに大きな影響を与えます。

table-layoutプロパティの構文

table-layout: auto | fixed | initial | inherit;

指定できる値の意味

  • auto（初期値）： セル内のコンテンツ量に応じて、ブラウザが自動的に列幅を計算します。
  • fixed: テーブル全体の幅と先頭行のセル幅をもとに列幅が固定されます。以降の行の内容を待たずに描画できるため、表示が高速になります。
  • initial: プロパティを初期値（auto）に戻します。
  • inherit: 親要素のtable-layoutの値を継承します。

例1： table-layout: auto を指定する

まずは「auto」を指定した例です。セルの内容に合わせて列幅が自動的に調整されます。

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border-collapse: collapse;
   background-color: black;
   color: white;
}
table#demo {
   table-layout:auto;
   width: 210px;
}
</style>
</head>
<body>
<h2>チーム順位表</h2>
<table id="demo">
<tr>
<th>チーム</th>
<th>順位</th>
<th>ポイント</th>
</tr>
<tr>
<td>インド</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>イングランド</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>オーストラリア</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>ニュージーランド</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>南アフリカ</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>西インド諸島</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>パキスタン</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>

出力結果

CSSのtable-layoutプロパティでテーブルレイアウトを制御する方法

幅210pxのテーブルに対してautoが適用されているため、各セルのテキスト量に応じて列幅が自動で決まっていることがわかります。

例2： table-layout: fixed を指定する

次に「fixed」を指定した例です。テーブルの幅を100%に設定しているため、各列が均等な幅で分割されて表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
table {
   background-color: green;
   color: white;
}
table#demo {
   table-layout: fixed;
   width: 100%;
}
</style>
</head>
<body>
<h2>チーム順位表</h2>
<table id="demo">
<tr>
<th>チーム</th>
<th>順位</th>
<th>ポイント</th>
</tr>
<tr>
<td>インド</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>イングランド</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>オーストラリア</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>ニュージーランド</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>南アフリカ</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>西インド諸島</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>パキスタン</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>

出力結果

CSSのtable-layoutプロパティでテーブルレイアウトを制御する方法

fixedを指定すると、セルの内容量に関係なく、先頭行のセル幅を基準に列幅が固定されます。そのため、どの列も同じ幅で整然と表示されています。

autoとfixedの使い分けのポイント

「auto」はコンテンツに応じて柔軟にレイアウトされる反面、行数や列数が多い大きなテーブルでは、全セルの内容を解析してから描画するため負荷が高くなります。一方「fixed」は先頭行の情報だけで列幅を決定できるため、大量のデータを扱うテーブルでも高速に表示できます。デザインの一貫性やパフォーマンスを重視する場合はfixed、内容に合わせた自然な幅にしたい場合はautoを選ぶとよいでしょう。

  1. CSSで比較表を作成する方法｜レスポンシブ対応のサンプルコード付きで解説

    CSSを使えば、画面幅に合わせて自動的に調整されるレスポンシブ対応の比較表を簡単に作成できます。料金プランやサービス機能の比較など、さまざまな場面で活用できるので、実装方法をマスターしておくと便利です。ここでは、実際のコード例をもとに、見やすく整った比較表の作り方を詳しく解説します。 比較表のサンプルコード 以下が、CSSでレスポンシブな比較表を作成するための完全なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=devic

  2. CSSでレスポンシブテーブルを作成する方法をわかりやすく解説

    CSSでレスポンシブ対応のテーブルを作成するには、テーブル全体を<div>要素で囲み、その親要素に overflow-x: auto; を指定するのが最もシンプルで確実な方法です。これにより、画面幅が狭い環境（スマートフォンやタブレットなど）でも、テーブルが横にはみ出すことなく、水平スクロールバーが自動的に表示されるようになります。レスポンシブテーブルのポイントレスポンシブテーブルを実現するうえで重要なCSSプロパティは以下のとおりです。overflow-x: auto; … コンテナからはみ出した内容に対して、必要な場合のみ横スクロールバーを表示します。width: 100%;