はじめに
MDX で記述されたテーブルをレンダリングする際、CSS による列幅の制御が課題になることがあります。テーブルの列には短い文字列から長いテキストまで様々なコンテンツが含まれます。固定幅やパーセンテージ指定ではコンテンツの変化や列数の増減に柔軟に対応できません。
カラム内のコンテンツ量を考慮していないと、以下のような読みづらいテーブル（均等配置されたテーブル構成）になってしまいます。
| PC 表示例 | モバイル表示例 |
|---|---|
 |
 |
今回はコンテンツに応じて列幅を自動調整する CSS の実装方法について紹介してみます。
コンテンツベースの幅調整
table-layout プロパティに auto を指定すると、テーブルとセルの幅がコンテンツに合わせて自動的に調整されます。ほとんどのブラウザでは、このアルゴリズムがデフォルトで使用されています。
table {
table-layout: auto; /* ブラウザが自動計算 */
width: 100%;
}
td,
th {
min-width: 3em; /* 最小幅のみ指定 */
}
table-layout: auto は以下の流れで列幅を決定します。
- ブラウザが全セルのコンテンツを読み取る
- 各列に必要な最小幅を計算
- テーブル全体の幅（100%）を確認
- コンテンツ量に応じて適切に配分
- 長すぎる内容は自動で折り返す
table-layout: auto を効果的に使う
table-layout: auto を効果的に使う方法を 3 つほど紹介します。
1. 最小幅で可読性を保証する
table-layout: auto はコンテンツに応じて幅を計算しますが、画面幅が狭い場合や列数が多い場合、各列の幅が極端に狭くなることがあります。
min-width を利用すると、カラムに対して最低限保証したい幅を確保できます。
td,
th {
min-width: 3em;
}
3em とした場合、一般的なフォントで約 3 文字分の幅に相当します。
2. テキスト折り返しを適切に設定する
セル内でのテキスト折り返しを適切に処理するために、以下のような CSS を追加します。
td,
th {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
-
word-wrap: break-word：古いブラウザとの互換性のため（単語が長すぎる場合に折り返しを許可する） -
overflow-wrap: break-word：最新の標準プロパティ（word-wrapと同じ動作） -
hyphens: auto：言語ルールに基づいて適切な位置にハイフンを挿入して折り返す（日本語の場合は適用されない）
これらを組み合わせることで、長い URL やコード文字列などがセルからはみ出すことなく、適切な位置で折り返されます。
3. ビューポート幅に応じて最小幅を調整する
ビューポート幅に応じて min-width の値を調整することで、より最適な表示を実現できます。
/* 例：769px 以上では最小幅を大きく */
@media (min-width: 769px) {
td,
th {
min-width: 5em;
}
}
/* 例：768px 以下では最小幅を小さく */
@media (max-width: 768px) {
td,
th {
min-width: 3em;
}
}
ここでは一例として、769px 以上では 5em、768px 以下では 3em を設定していますが、これらの値はテーブルに含まれるデータの特性（短い数値が多いのか、長い文字列が多いのか）や、列数、デザイン要件に応じて調整する必要があります。
このようにビューポート幅毎に min-width を段階的に調整することで、どの環境でも「狭すぎて読めない」「広すぎて情報が少ない」という極端な状態を避けられます。
実装例
最もシンプルな方法
/* テーブル本体 */
table {
table-layout: auto; /* ブラウザに計算させる */
width: 100%;
border-collapse: collapse;
}
/* セルの設定 */
td,
th {
padding: 0.75rem 1rem;
min-width: 3em; /* 最小幅を保証 */
word-wrap: break-word; /* 長い単語は折り返す */
overflow-wrap: break-word;
}
-
table-layout: autoでコンテンツ量に応じた列幅の自動計算 -
width: 100%でテーブルを親要素の幅いっぱいに広げる -
border-collapse: collapseでセル間の境界線を統合して見た目をスッキリさせる -
paddingで適度な余白を確保する -
min-width: 3emで最小幅を保証 -
word-wrapとoverflow-wrapで長いコンテンツのはみ出しを防止
レスポンシブ対応
これを各デバイス毎に最適化していきます。
/* PC/タブレット：余裕を持った表示 */
@media (min-width: 769px) {
td,
th {
min-width: 5em;
}
}
/* 768px 以下：パディングと最小幅を調整 */
@media (max-width: 768px) {
td,
th {
padding: 1rem 0.85rem;
min-width: 3em;
}
}
/* 480px 以下：さらに調整 */
@media (max-width: 480px) {
td,
th {
padding: 0.85rem 0.65rem;
min-width: 2em;
}
}
ビューポート幅毎の調整例：
-
769px 以上：
min-widthを大きめに設定してセル間の間隔を広く取る -
768px 以下：パディングを
1rem 0.85remに調整して左右の余白を狭める（min-widthも小さめの値） -
480px 以下：パディングと
min-widthをさらに小さくして狭い画面幅に対応する
具体的な値は、テーブルに含まれるコンテンツの性質に応じて調整します。
横スクロール防止
個人的には横スクロールは視認性と操作性の観点からあまり好まないので、以下の設定を入れたりしますが、あくまでオプションです。
.table-wrapper {
overflow-x: hidden;
}
table {
width: 100% !important;
max-width: 100% !important;
}
-
overflow-x: hiddenでテーブルが画面幅を超えても横スクロールバーが表示されない -
!importantで他の CSS FW のスタイルよりも優先させる- テーブルを強制的に画面幅 100% に収めておくと、すべてのコンテンツが折り返されて表示される
比較
PC 版表示例
| 修正前 | 修正後 |
|---|---|
|
 |
 |
 |
モバイル版表示例
| 修正前 | 修正後 |
|---|---|
|
 |
 |
 |
まとめ
本記事では、table-layout をベースに最小限のルールだけを追加して、後はブラウザに任せるレスポンシブテーブルの実装についてまとめてみました。
table-layout: auto を使用することで、各列の幅を固定値やパーセンテージで細かく指定する必要がなくなります。ブラウザがコンテンツを解析して自動的に列幅を計算するため、列数やコンテンツが変わっても CSS の修正が不要です。
min-width で最小幅を設定しておくことで、画面幅が狭い場合でも可読性を保てます。
また、word-wrap や overflow-wrap によってテキストを適切に折り返すことで、横スクロールを防ぎつつ、長い URL やコード文字列にも対応できます。
ビューポート幅に応じて min-width やパディングを調整すれば、様々な画面サイズで適切な表示が可能になります。
参考・引用