メンズファッション 待望の再入荷! マイケルコース ロゴプリントデザイン スウェット パンツ ブラック Ahj2ozNc7W

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

(まとめ) 積水成型工業 タフロープ 標識テープ(印刷テープ) 非粘着 キケン注意 70mm×50m ITKKT 1巻 〔×10セット〕

<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が広がらないので注意してください。