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

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

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

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

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

テーブル

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

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

CSSを使うパターン

テーブルのhtml全体を<div class="table-wrap">〜</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です。

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

横方向にセルを固定

サンプルテキスト
これはサンプルテキストです。
これはサンプルテキストです。
これはサンプルテキストです。
サンプルテキスト
これはサンプルテキストです。
これはサンプルテキストです。
これはサンプルテキストです。
サンプルテキスト
これはサンプルテキストです。
これはサンプルテキストです。
これはサンプルテキストです。

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

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