cssでoverflow: auto;をあてた横スクロールするtableの右側に余白をつける方法

これしょっちゅう出くわすのにいつもやり方を忘れるので備忘録として残しておきます。

詳しい説明が見たい方は下記記事参考になります。

https://mycus-tom.com/posts/23

この記事では解決方法だけをサラッと載せておきますね。

まずはコードから。

See the Pen overflow: auto;をあてた横スクロールするtableの右側に余白をつける by えり (@anyxfbuk-the-scripter) on CodePen.

結論から言うと疑似要素で解決しています。

overflow-x: auto;をかけた中の要素に、疑似要素で右側に空白を作ると、右側に余白をつくることができます。

コードで言うと下記の箇所になります。

table::after {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 100%;
  height: 1px;
  width: 30px;
  background-color: transparent;
}

では軽く解説を。

解説

html

<div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th>1列目タイトル1列目タイトル1列目タイトル</th>
        <th>2列目タイトル2列目タイトル2列目タイトル</th>
        <th>3列目タイトル3列目タイトル3列目タイトル</th>
        <th>4列目タイトル4列目タイトル4列目タイトル</th>
        <th>5列目タイトル5列目タイトル5列目タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1行目タイトル1行目タイトル1行目タイトル</th>
        <td>テキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキスト</td>
      </tr>
      <tr>
        <th>2行目タイトル2行目タイトル2行目タイトル</th>
        <td>テキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキスト</td>
      </tr>
      <tr>
        <th>3行目タイトル3行目タイトル3行目タイトル</th>
        <td>テキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキスト</td>
      </tr>
      <tr>
        <th>4行目タイトル4行目タイトル4行目タイトル</th>
        <td>テキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキスト</td>
      </tr>
    </tbody>
  </table>
</div>

特筆すべきことはありませんが、tableをtable-wrapクラスをつけたdiv要素で囲っています。

この.table-wrapに対して、overflow-x:auto;を適用します。

tableの中身は何でもOK

css

.table-wrap {
  overflow-x: auto;
  padding-left: 30px;
}
table {
  position: relative;
  white-space: nowrap;
}
table::after {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 100%;
  height: 1px;
  width: 30px;
  background-color: transparent;
}

見た目調整用の不要コードは省いて、重要の箇所だけ解説します。

.table-wrap

overflow-x: auto;で、中の要素がはみ出たらスクロールするようにします。絶対はみ出るとわかっている場合は、overflow-x: scroll;でもOKかと思います。

padding-left: 30px;で左側の余白をつけています。左側の余白はpaddingでつけて問題なし。右側の余白もpaddingで簡単につけられれば良いんですけどね…

table

疑似要素をtableタグを基準にして配置したいので、position: relative;を書いておきます。

また、横スクロールで表を表示したいので、white-space: nowrap;で文字が折り返さないようにしておきます。ただ、あまり長い文章の場合にこれをやるとかなり読みずらい表になるので、その場合はthやtdに横幅（width）を指定する方法の方が良いかと思います。

table::after

ここが右側の余白をつけるコードになります。

width: 30px;の部分が余白の横幅になるので、ここを適宜変更してもらって、その他のコードはどれも必要な記述になりますので、変更無しで使用してください。

position: absolute; ：position:relative;を指定したtableに対して相対配置する
content: ''; ：中身は無し
display: block; ：widthを指定したいのでblock要素にする
top: 0; ：位置指定。まあどこでも良いけどとりあえずtopに。
left: 100%; ：位置指定。要素の右側に配置。
height: 1px; ：高さがないとコードが動かないので1px高さを与える。
background-color: transparent; ：背景色は透明に。

これで横スクロールの表の右側にも余白が出来たと思います！

まとめ

かなり日常業務で出会う頻度高めのコードだと思います。

横スクロールの右側に余白を入れたい場合はぜひ使ってみてください。

もしわからないことあれば質問ください！

記事にしてほしい・解説してほしい内容のリクエストもお待ちしています。