tableで横スクロールバーを追加する

以前にtableで横スクロールできるようにするという記事で、tableにラッパー要素を追加して横スクロールの設定を追加する方法を試しましたが、ラッパー要素なしで横スクロールの設定を行なっているサイトを見かけたので、その設定を試してみます。

サンプルコード

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>birthday</th>
      <th>height</th>
      <th>group</th>
      <th>introduction</th>
      <th>twitter</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rosemi Lovelock</td>
      <td>September 16th</td>
      <td>150cm</td>
      <td>OBSYDIA</td>
      <td>A rose maiden raised in a beautiful garden.Pretty as a rose in a vase, but a little sharp to the touch.</td>
      <td>@Rosemi_Lovelock</td>
    </tr>
    〜略〜
  </tbody>
</table>

tableに対してdisplay: block を設定した上で、overflow-x: auto でコンテンツ幅が大きい場合にスクロールバーを表示するようにします。

table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

これでtableが親要素の幅をはみ出している場合に、横スクロールバーを表示するようになりました。
tableで横スクロールバーを出すデモページ
上記デモ内にも例で入れていますが、tableの中身が少ない場合は親要素の幅いっぱいにtableが広がらないので注意してください。