# table-layout

> テーブルのレイアウトアルゴリズムを制御するプロパティです。セルの幅をどのように計算するかを決定し、テーブルの描画パフォーマンスや見た目に影響します。大きなテーブルでの表示速度向上にも効果的です。

- カテゴリ: その他
- URL: https://www.css-dictionary.com/property/table-layout/

## 構文

```css
table-layout: auto | fixed
```

## Tailwindでは

- `table-fixed` → table-layout: fixed
- `table-auto` → table-layout: auto

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 14+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: auto: セル内容に応じて幅を自動調整（デフォルト）

```css
.table-auto {
  table-layout: auto;
  width: 100%;
}

/* セル内容に応じて幅が自動調整される */
th, td {
  padding: 8px;
  text-align: left;
}
```

### 例2: fixed: 最初の行の幅設定に基づいて固定レイアウト

```css
.table-fixed {
  table-layout: fixed;
  width: 100%;
}

/* 最初の行の幅設定が全体に適用される */
th:nth-child(1) { width: 30%; }
th:nth-child(2) { width: 50%; }
th:nth-child(3) { width: 20%; }
```

### 例3: 大量データテーブルでのパフォーマンス最適化

```css
.performance-table {
  table-layout: fixed;
  width: 100%;
}

/* 大量データのテーブルでパフォーマンス向上 */
.col-id { width: 10%; }
.col-name { width: 40%; }
.col-email { width: 35%; }
.col-status { width: 15%; }
```

### 例4: レスポンシブデザインでの使い分け

```css
.responsive-table {
  table-layout: fixed;
  width: 100%;
}

/* レスポンシブテーブルの基本設定 */
@media (max-width: 768px) {
  .responsive-table {
    table-layout: auto;
  }
}
```

### 例5: 均等幅カラムでの整然としたレイアウト

```css
.data-table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

/* 均等幅のカラムレイアウト */
.data-table th,
.data-table td {
  width: 25%;
  padding: 12px;
  border: 1px solid #ddd;
}
```

## TIPS

table-layout: fixedは描画が高速で、大量データに適している。幅を事前に定義できるため、レイアウトが安定する。autoは内容に応じて柔軟に調整されるが、計算コストが高い。

## よくある間違い

fixedを使う際に列幅を指定しないと、等幅になってしまう。autoでは内容が多い列が他の列を圧迫する場合がある。レスポンシブ対応時の使い分けも重要。

## AIがよく間違えるポイント

table-layout: fixedにしないとtableのセルでtext-overflow: ellipsisは効きません（自動レイアウトは内容で列幅が決まるため）。「テーブルのセルで省略記号が効かない」問題の答えがこれで、AIはこの因果関係に辿り着かないことがあります。列幅は1行目（またはcol要素）で決まる点も重要です。

## AIへの依頼文例

- テーブルの特定列だけ幅固定+省略記号にしたい。table-layout: fixedとcolを使って実装して