Zenn
👉

自然な改行位置で横スクロールするテーブルを作る（欠点あり）

2024/01/19に公開
CSS
レスポンシブ
表組み
tech

テーブル（表組み）のレスポンシブ対応として次の2つがよく紹介されています。

  1. overflow-xを指定して横スクロールさせる
  2. カスタムデータ属性を使って縦に並べる

2.の縦に並べるパターンだと、そもそも表組みではなくなってしまいますし、セルの結合やthタグが入れ子になるような複雑な表組みだと対応が難しい場合もありそうです（ちゃんと調べてない）。

というわけで横スクロールをして対応するわけですが、brタグを入れないと改行されなくなるので、文章量が長くなるコンテンツだとかなり読みにくくなってしまいます。

スクロールテーブルにほどよく改行を入れたい場合のコード

上記を別タブで開いて、画面サイズごとの表示を確認してみてください。

HTML

一般的な横スクロールテーブルと同じように、tableタグをdivタグで囲んでおきます。

    <div class="responsiveTable">
      <table class="responsiveTable_Table">
      </table>
    </div>

CSS

CSSで重要なのは2カ所です。

  • 親要素のdivタグにoverflow-x: auto;を指定する
  • tableタグにmin-width: 200vw;のように横幅指定をする
.responsiveTable {
  overflow-x: auto;
  width: 100%;
  padding-bottom: 20px;
}

.responsiveTable_Table {
  width: 100%;
  min-width: 200vw;
  margin-top: 0;
}

@media screen and (min-width: 480px) {
  .responsiveTable_Table {
    min-width: 150vw;
  }
}

@media screen and (min-width: 800px) {
  .responsiveTable_Table {
    min-width: auto;
  }
}

横幅に指定する値はコンテンツに依存するところが大きいのが欠点です。
サイトやアプリのコンテンツに合わせて調整してみてください。コンテンツによって、いくつかのパターンを作っておくのもいいかもしれません。
ここではvwを使っていますが、pxなど別の単位でも問題ありません。

追加で入れておくといいかもしれないコード

colgroup

表組みごとにHTMLを変更できる場合はcolgroupタグを使うと微調整できます。

指定方法は以下のような感じです。

    <div class="responsiveTable">
      <table class="responsiveTable_Table">
        <colgroup>
          <col style="width: 5%" />
          <col style="width: 25%" />
          <col style="width: 10%" />
          <col style="width: 10%" />
          <col style="width: 50%" />
        </colgroup>
        <thead>

codesandboxにコメントアウトしているので、つけ外しをして表示を確認してみてください。

tdタグにmin-width

セルごとに最小幅を指定しておくと、幅が狭くなったときにセルが1文字ごとに改行されてしまう、といったことを避けられます。
以下のコードはセルの左右に1emずつ余白を指定していて、4文字分は確保したい場合です。

td {
  min-width: 6em;
  padding: 1em;
}

word-break: auto-phrase;で日本語の文節ごとに自然な改行

Chrome 119以降で文節ごとに改行をしてくれるプロパティが使えるようになりました。

CSS に 4 つの新しい国際化機能を導入  |  Blog  |  Chrome for Developers

たとえばtdタグに指定します。

td {
  word-break: auto-phrase;
}

lang="ja"を指定しておく必要があります。

<!DOCTYPE html>
<html lang="ja">

codesandboxにコメントアウトしているので、つけ外しをして表示を確認してみてください。
文章量が多いと、画面幅が狭いときに改行が入りすぎてしまうのが欠点です。短いテキストが多い場合に指定するとキレイに表示しやすくなるかもしれません。

Discussion