テーブルのレイアウトアルゴリズムを制御するプロパティです。セルの幅をどのように計算するかを決定し、テーブルの描画パフォーマンスや見た目に影響します。大きなテーブルでの表示速度向上にも効果的です。
table-layout: auto | fixed.table-auto {
table-layout: auto;
width: 100%;
}
/* セル内容に応じて幅が自動調整される */
th, td {
padding: 8px;
text-align: left;
}| ID | 名前 | 説明 |
|---|---|---|
| 1 | 太郎 | 短い説明 |
| 2 | 花子 | とても長い説明文がここに入ります。この列は内容に応じて幅が広くなります。 |
| 3 | 次郎 | 中程度の説明 |
auto: セル内容に応じて幅を自動調整（デフォルト）
.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%; }| ID (30%) | 名前 (50%) | 説明 (20%) |
|---|---|---|
| 1 | 太郎 | 短い説明 |
| 2 | 花子 | とても長い説明文... |
| 3 | 次郎 | 中程度の説明 |
fixed: 最初の行の幅設定に基づいて固定レイアウト
.performance-table {
table-layout: fixed;
width: 100%;
}
/* 大量データのテーブルでパフォーマンス向上 */
.col-id { width: 10%; }
.col-name { width: 40%; }
.col-email { width: 35%; }
.col-status { width: 15%; }| ID | 名前 | メール | 状態 |
|---|---|---|---|
| 1 | ユーザー1 | user1@example.com | 有効 |
| 2 | ユーザー2 | user2@example.com | 保留 |
| 3 | ユーザー3 | user3@example.com | 有効 |
| 4 | ユーザー4 | user4@example.com | 保留 |
| 5 | ユーザー5 | user5@example.com | 有効 |
大量データテーブルでのパフォーマンス最適化
.responsive-table {
table-layout: fixed;
width: 100%;
}
/* レスポンシブテーブルの基本設定 */
@media (max-width: 768px) {
.responsive-table {
table-layout: auto;
}
}| 項目 | 値1 | 値2 | 値3 |
|---|---|---|---|
| 売上 | ¥100,000 | ¥150,000 | ¥200,000 |
| 項目 | 値 |
|---|---|
| 売上 | ¥100,000 |
レスポンシブデザインでの使い分け
.data-table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
/* 均等幅のカラムレイアウト */
.data-table th,
.data-table td {
width: 25%;
padding: 12px;
border: 1px solid #ddd;
}| Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|
| ¥1,200,000 | ¥1,450,000 | ¥1,350,000 | ¥1,600,000 |
| ¥1,100,000 | ¥1,250,000 | ¥1,400,000 | ¥1,500,000 |
均等幅カラムでの整然としたレイアウト
table-layout: fixedは描画が高速で、大量データに適している。幅を事前に定義できるため、レイアウトが安定する。autoは内容に応じて柔軟に調整されるが、計算コストが高い。
fixedを使う際に列幅を指定しないと、等幅になってしまう。autoでは内容が多い列が他の列を圧迫する場合がある。レスポンシブ対応時の使い分けも重要。
IE5+, 全ブラウザ対応