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

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

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

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;
}

CSSを使わないパターン

もしくは、cssなしで直接書き込む

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

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

コード管理的には全然良くないんですけどね。

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

横方向にセルを固定

<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;"をつけて記載します。

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