【CSS】はみ出したテーブル（表）をスクロールバーで表示する方法

こんにちは、タクローです。

ウェブサイト幅のサイズは決まっているけど、そのサイズを超える「はみ出した横長のテーブル」を表示したい時ってありませんか？

スクロールバーをうまく表示できれば、そのような場合でも問題なくテーブル情報を載せることができるでしょう。

具体的には下のような感じです。

氏名	住所	電話番号	年齢	趣味	自己紹介
サンプル太郎	東京都千代田区	999-8888-7777	30	熱帯魚	熱帯魚をこよなく愛する会社員です。よろしくお願いいたします。
サンプル一郎	東京都世田谷区	999-6666-5555	26	映画鑑賞	時間があれば映画を見ています。映画について情報交換できれば幸いです。
サンプル五郎	東京都港区	999-4444-3333	41	ジョギング	スポーツは見るのも、するのも大好きです。スポーツ観戦に一緒に行きましょう。

今回は、このようなスクロールバー付きでテーブルを表示する方法を解説していきます。

解説する前に、今回、ポイントとなるwhite-spaceプロパティとoverflowプロパティについて、押さえておきましょう。

white-spaceプロパティとは

HTMLでは「タブ」、「改行」、「頁送り」、「復帰」、「空白」の5文字をWhitespace（ホワイトスペース）と定めています。

white-spaceプロパティは、このWhitespace（ホワイトスペース）に対する処理を指定する時に使います。

white-spaceプロパティで使われる主な値は以下の通りです。

normal	ホワイトスペースは無視されます。改行文字はホワイトスペースとして扱われ、半角スペースとして表示されます。ボックスサイズが定められている場合は、自動的に改行されます。
pre	ホワイトスペースは表示されます。改行文字は表示されます。ボックスサイズが定められている場合でも、自動的に改行はしません。
nowrap	ホワイトスペースは無視されます。改行文字はホワイトスペースとして扱われ、半角スペースとして表示されます。ボックスサイズが定められている場合でも、自動的に改行はしません。
pre-wrap	ホワイトスペースは表示されます。改行文字は表示されます。ボックスサイズが定められている場合は、自動的に改行されます。
pre-line	ホワイトスペースは無視されます。改行文字は表示されます。ボックスサイズが定められている場合は、自動的に改行されます。

overflowプロパティとは

overflowプロパティは、ボックス内におさまらなかったコンテンツに対する処理を指定する時に使います。

overflowプロパティで使われる主な値は以下の通りです。

visible	overflowプロパティを使わなければ、visibleが適用されます。ボックス内におさまらなかったコンテンツは、はみ出して表示されます。
hidden	ボックス内におさまらなかったコンテンツは表示されません。スクロールバーなども表示されません。
scroll	ボックス内におさまらなかったコンテンツは表示されません。おさまらなかったコンテンツはスクロールバーなどを使って表示することができます。
auto	処理はブラウザに委ねられます。コンテンツがボックス内におさまらなかった場合は、スクロールバーなどを使って表示することができます。

overflowプロパティは上下左右、全方向に対する処理を指定します。

一定方向のみ、処理を指定するためのプロパティもあります。

ボックス内におさまらなかったコンテンツの横方向の表示方法を決めるときに使うoverflow-xプロパティと、縦方向の表示方法を決めるときに使うoverflow-yプロパティです。

値の使い方、考え方は同じですので、参考にしていろいろ使ってみてください。

はみ出したテーブルをスクロールバーで表示する方法

それでは本題に入っていきます。

冒頭のスクロールバー付きテーブルのHTMLとCSSは以下のとおりです。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>サンプルテーブル</title>
  <style>
    
  .table-contents {
    overflow-x: scroll;
    width: 640px;
  }

  table {
    white-space: nowrap;
    border-collapse: collapse;
    min-width: 640px;
    border: 1px #666666 solid;
  }

  th {
    background-color: #7B9DB3;
    color:#FFFFFF;
    font-weight: normal;
  }

  th, td {
    border: 1px #666666 solid;
    padding: 3px 8px;
  }
    
  </style>
</head>
<body>
  <div class="table-contents">
    <table>
      <tr>
        <th>氏名</th>
        <th>住所</th>
        <th>電話番号</th>
        <th>年齢</th>
        <th>趣味</th>
        <th>自己紹介</th>
      </tr>
      <tr>
        <td>サンプル太郎</td>
        <td>東京都千代田区</td>
        <td>999-8888-7777</td>
        <td>30</td>
        <td>熱帯魚</td>
        <td>熱帯魚をこよなく愛する会社員です。よろしくお願いいたします。</td>
      </tr>
      <tr>
        <td>サンプル一郎</td>
        <td>東京都世田谷区</td>
        <td>999-6666-5555</td>
        <td>26</td>
        <td>映画鑑賞</td>
        <td>時間があれば映画を見ています。映画について情報交換できれば幸いです。</td>
      </tr>
      <tr>
        <td>サンプル五郎</td>
        <td>東京都港区</td>
        <td>999-4444-3333</td>
        <td>41</td>
        <td>ジョギング</td>
        <td>スポーツは見るのも、するのも大好きです。スポーツ観戦に一緒に行きましょう。</td>
      </tr>
    </table>
  </div>
</body>
</html>

CSS（<style>～</style>）に注目してください。

ここでは、横方向のスクロールバーを表示していますので、overflow-xプロパティ（9行目）を使っています。

ただ、tableタグに対し、overflow-xプロパティを使っても正しく動作しません。

必ず親要素を用意し、そこでoverflow-xプロパティを使わなければなりませんので注意してください。

その際、widthプロパティ（10行目）で横幅サイズの指定が必要になりますので、このことにも注意が必要です。

もし、縦方向のスクロールバーを表示するためにoverflow-yプロパティを使う場合は、heightプロパティで縦サイズの指定が必要になります。

これらを注意したうえで、「table-contents」というCSSのクラスをテーブルの親要素として用意したdivタグに適用しています。

tableタグに対し、折り返ししないようwhite-spaceプロパティ（14行目）を使っていることもポイントです。

white-spaceプロパティを使わないと、テーブル内で自動的に折り返し、はみ出さないテーブルが表示されてしまいます。

つまり、スクロールバーを表示しなくなってしまいますので、overflow-xプロパティで指定した値が意味のないものになってしまいます。

まとめ

親要素に対しoverflowプロパティを使うことがわからないと結構苦労する表示方法だと思います。

overflowプロパティを使う場所や、合わせて使うwidthプロパティ、heightプロパティに気を付ければ、それほど難しいことはありません。

また、各行の高さが違っていたら、バランスが悪く見映えに影響するでしょうから、white-spaceプロパティもマスターしておきたいところです。

別に表じゃなくても応用できます。

親要素の中のはみ出したコンテンツに対し、スクロールバーを使うことも簡単にできてしまいます。

ぜひ、この記事を参考にして、いろいろなことにチャレンジしてみてください。

最後まで、お付き合いいただき、ありがとうございました。