【CSS】tableの見出しセルを文字幅に合わせる。文字の両端も揃える(スペースは使わない)
当サイトのリンクには広告が含まれています。
テーブルの見出しセルの幅が文字数ピッタリ、かつ文字の両端揃えが必要なレイアウトってありますよね。経験上、デザイナーさん、特にDTP出身の方から支給されるデザインは、ほぼこのパターンです。
よくあるデザイン例
| 会社名 | 株式会社◯◯◯ |
|---|---|
| 住所 | 東京都◯◯区 |
| 電話番号 | 00-0000-0000 |
こういう表デザイン、よく貰いませんか？
しかし、本番の原稿データや、納品後の先方管理下では、セル内に何文字入るのか分からないため、コーディングでは地味に厄介なケースです。
今回はtableの見出しセル(th,td)を、自動で中身の文字幅に合わせながら、文字の両端も揃える方法を解説します。
tableの見出しセル(th,td)を文字幅に合わせ、両端も揃えるデモ
See the Pen tableの見出しセルを文字幅に合わせ、文字の両端も揃える方法 by MEMORUKA (@memoruka) on CodePen.
デモコードの概要
具体的には、セルの幅を文字数に自動で合わせるにはwidth: 1em;※と、改行禁止のwhite-space: nowrap;を活用。さらにtext-align-last: justify;を使うことで、文字の両端も整えられます。
widthを1emで設定。さらにwhite-space: nowrap;を設定し、改行を防止することでセル幅が中身に依存する状態になる。その結果、文字幅に応じてセルが自動で伸びて調整されます。text-align-last: justify;でセル内の文字を両端揃えにします。
※中身の文字幅以下の数値なら何でも良いです。当初はwidth:0;を指定しましたが、0指定だとSafariのみautoと同じ挙動になり、セル幅が伸びてしまったため、1em(1文字分)を代入して、auto化を防止しました。
見出しセル(th,td)の幅を文字幅に合わせる
/* 見出しセル(th)の幅を文字幅に合わせる */
th {
width: 1em;
white-space: nowrap;
}width: 1em;でセル幅を最小化
見出しセル(thやtd)にwidth: 1em;を設定し、autoで伸びる事を防止。セルの幅が中身に依存する準備をします。
white-space: nowrap;で改行を防止
プロパティwhite-space: nowrap;を設定することで、テキストの改行が防がれ、1行に収まるようになります。その結果、セル幅が文字幅に応じた最小値となります。
見出しセル(th)の両端揃え(スペースは使わない)
/* 見出しセル(th)の両端揃え(スペースは使わない) */
th {
text-align-last: justify;
}text-align-last: justify;で両端を揃える
文字間隔を調整する際に「スペースを連打して追加する」のは適切ではありません。単語が不自然に分断され、アクセシビリティやSEOにも悪影響を及ぼす可能性があります。
代わりに、モダンCSSのtext-align-last: justify;を設定することで、セルごとに文字数が異なっていても、最後の行の両端を揃えることが可能です。
完成
| 会社名 | 株式会社◯◯◯ |
|---|---|
| 住所 | 東京都◯◯区 |
| 電話番号 | 00-0000-0000 |
th {
width: 1em;
white-space: nowrap;
text-align-last: justify;
}※Firefoxは「html lang=”ja”」の設定が必要
まとめ
以上、tableの見出しセルを文字幅に合わせ、文字の両端も揃える方法でした。
今回の方法を使えば、widthに絶対値を指定せず、文字量に応じた柔軟な対応が可能になります。また、text-align-last: justify;を活用することで、セルごとに文字数が異なっていても自動で両端を揃えることができます。
