テーブルを横スクロールする方法｜htmlのみ・CSSありの2パターン解説

テーブルを横スクロールする方法

こんな感じの、横スクロールするテーブルが作れます。

CSSを使わないパターン（htmlのみ）

cssなしで、htmlに直接書き込みます。

<div style="overflow-x: scroll;">
テーブル
</div>

ワードプレスの追加CSSよりも、こちらのようにhtmlに直接書き込んだ方が優先されるので、一部の記事だけ横スクロールしたい場合はこちらがおすすめです。

画面をはみ出すくらいの大きなテーブルは、そこまで作成する頻度が多くないので、この方法の方がシンプルです。

CSSを使うパターン

テーブルのhtml全体を<div class="table-wrap">〜</div>で囲み

<div class="table-wrap">
  <table class="table">
    <tr>
      <th>サンプルテキスト</th>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
    </tr>
    <tr>
      <th>サンプルテキスト</th>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
    </tr>
    <tr>
      <th>サンプルテキスト</th>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
    </tr>
  </table>
</div>

cssには以下のように設定します。

.table-wrap {
  overflow-x: scroll;
}

注意点

こちらのテーブル横スクロールは、
width: 100%;
が設定されていると動作しません。（width: 100%;が優先になってしまい、横幅が画面サイズになってしまう）

もし設定されている場合は
width: 800px;
など、px単位で長さを表示するように設定してください。

<table style="width: 100%;">
↓
<table style="width: 800px;">

pxの大きさは、かなりざっくりですが1列100pxとして設定後、表示と調整を繰り返してください。
8列あるテーブルは800px、5列あるテーブルは500pxです。
（100pxは、5文字くらいがすっぽり入る広さです。）

参考までに、iphone Xの横幅のピクセル数は375pxです。

ヘッダーセルだけ固定してスクロールする方法

横方向にセルを固定

<div class="table-wrap" style="overflow-x: scroll;">
<table class="table" style="width: 1200px;">
<tbody>
<tr>
<th style="position: sticky; left: 0;">サンプルテキスト</th>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
</tr>
<tr>
<th style="position: sticky; left: 0;">サンプルテキスト</th>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
</tr>
<tr>
<th style="position: sticky; left: 0;">サンプルテキスト</th>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
</tr>
</tbody>
</table>
</div>

ヘッダー行（th）に、style="position: sticky; left: 0;"をつけて記載します。

縦スクロールの場合もできるので記載する予定なのですが、
ちょっと横幅が合わなくて、うまくいかないことが多いので少々お待ち下さい。