ワードプレスで特定の表をプラグインを使わないで横にスクロール（スライド）させる方法

私は、ワードプレスの記事で表（テーブル）をあまり使わないのですが、今回、違うブログでかなり縦長、横長の表を作る機会がありました。

ワードプレスの標準の表（テーブル）には、表が横に長くなった場合、表をスライド（スクロール）して表示するという機能がありません。

そのため、あまりにも横に長くなるとブログのレイアウトを崩してしまう場合があります。

そこで、表を横にスクロール（スライド）させる方法は、ないものかと探してみました。

今回の記事では、ワードプレスの標準の表を横にスクロールさせる方法について書いてみます。

その前に、注意しなくてはいけないことが結構あります。指示通りにCSSにコードを入力してもうまくいかない、表のスタイルは、どれがおすすめなのか？などの注意事項です。

まずは、その説明からしていますが、そんなことは、充分わかっているという方は、

「6 実際に表を作ってみる！」からお読みください！

ワードプレスで表を横にスクロールさせる方法は主に3つあるが環境によってはうまくいかないことも！？

ワードプレスで表を横にスクロールさせる方法は、主に以下の3つです。

1、プラグインを使う

簡単に、多彩な機能を使えますが、基本的に、旧エディターには、対応していません。

表を横にスクロールさせるプラグインを使えるのは、基本的に、新しいブロックエディターだけだと思った方がよさそうです。

旧エディターとは、以下のような「Classic Editor」などのプラグインを使って旧エディターを使っている場合です。

表のカスタマイズを行える「Flexible Table Block」という有名なプラグインがありますが、これもブロックエディターでしか使えません。

そのため現在、記事を投稿するときに、ブロックエディター（新しいエディター）を使用していて、特定の表をスクロールさせたいのなら「Flexible Table Block」というプラグインを使うことをおすすめします！

簡単に表を横にスクロールさせることができますし、左端の1列目を固定して追従式にすることもできます。また非常に高機能で他にもできることがたくさんあります。

※現在、旧エディターを使っていて、横にスクロールする表を作るときだけブロックエディターに切り替えて「Flexible Table Block」というプラグインを使い、表を作った後に、旧エディター戻すというやり方は、おすすめできません。

実際、私もやったことがありますが、記事のレイアウトが大きく崩れました。また見出しのデザインも変わりました。

2、表のスクロール機能が、搭載されているワードプレスのテーマを使う。

現在、使用しているワードプレスのテーマに、表のスクロール機能が搭載されていないかを調べてみて下さい。cocoon（コクーン）などには標準で搭載されています。

※ただし、表のスクロール機能が搭載されているワードプレスのテーマでも、特定の表だけを横にスクロールさせることができる場合とできない場合があります。

つまり表をスクロールさせる機能をONにすると、すべての表にスクロール機能が反映されてしまう場合があります。

3、CSS側とhtml側に、表を横にスクロールさせるコードを書き込む

表をスクロールさせることができるCSSコードが、ネットで色々公開されています。ただし、自分にあったものを選ぶことが大切です。

私は、ワードプレスのテーマが、Simplicity2で、旧エディターを使っていますので、プラグインを使わないで表をスクロールさせる方法を選びました。

ネットで公開している表をスクロールさせる方法を試してもうまくいかないこともある！？

私も実際に、ネットで公開されている「表を横にスクロールさせる方法」をいくつか試してみました。

そのサイトの指示通りに、CSS側とHTML側にコードを入力しましたが、全く表がスクロールしなかった経験が何回かあります。

考えられる原因

1、使用しているワードプレスに初めから表をスクロールさせる機能があり、CSSが、互いに競合、干渉しあって不具合が出ている。

2、以前に、異なるタイプの表をスクロールさせるCSSコードをワードプレスのスタイルシートに入力したことがあり、そのコードと競合、干渉しあって不具合が出ている。

などの原因が考えられます。

スクロール可能な表を作る際は、よく考える必要がある！

これは、なかなか重要なことです。

以下に、おおざっぱですが、スクロール可能な表の種類を紹介してみました。

1、縦にスクロールのみ可能な表

そのため個人的には、特別な理由がない限り（横幅が短い表の場合）、このスタイルの表は、あまりおすすめしません！
また横幅が割と短めで5項目ほどの表なら見やすいかもしれませんが、それは、あくまでもPCの場合で、スマートフォンで見るとやはり見づらくなります。

2、縦にスクロールのみ可能な表で、横軸の1行目が固定で追従式

上記の1と同じ理由で、個人的には、特別な理由がない限り（横幅が短い表の場合）、このスタイルの表は、あまりおすすめしません！

3、横にスクロールのみ可能な表

そのため個人的には、
スライドさせる表を作りたい場合は、このスタイルの表を、おすすめします！

4、横にスクロールのみ可能な表で、縦軸の1列目が固定で追従式

そのため個人的には、
スライドさせる表を作りたい場合は、このスタイルの表をおすすめします！

5、縦、横にスクロール可能な表（1列目、1行目の追従なし）

6、縦、横にスクロール可能な表（1列目、1行目が固定で追従式）

個人的な意見ですが、
縦横にスクロールする表を導入する場合、
追従式にするなら縦軸の1列目のみか、横軸の1行目のみを追従式にした方がいいと思います！縦軸と横軸を両方追従式にするのはレイアウトのことを考えると、特別な理由がない限りは、やめておいた方が無難かもしれません。

その理由は、
縦横スクロール、縦軸の1列目、横軸の1行目の2つの追従式は、非常に高度な技術であり、CSSの知識が高い人でも、使う方の環境、例えば、ブラウザ（クローム、エッジ、ファイヤーフォックスなど）、デバイス（PC、スマートフォン、タブレットなど）、ワードプレスのテーマなどによって表示のされ方が異なる場合があるからです。

例えば、ブラウザが、クロームの場合は、正常に表示できても、エッジだと表示できなかった。などのケースが起こりえます。

スクロールする表で私がおすすめだと思うものは！？

●横にスクロールのみ可能な表

●横にスクロールのみ可能な表で、縦軸（1列目）が固定で追従式

●縦、横にスクロール可能な表（縦軸の1列目か、横軸の1行目のどちらかだけ固定で追従式）

私が、実際に記事に表を導入してみて便利で安全なのは、上記の3つだと思いました！

特にお勧めなのは、横にスクロールのみ可能な表で、縦軸の1列目が固定で追従式の表です！

上記の3つのタイプの表の作り方を順番に紹介してきます！

スクロールする表を作る際の注意事項！

●表をスクロールさせるためCSSコードを複数、スタイルシートに書き込むのはなるべくやめた方がいい

CSSコードが競合、干渉して不具合が出る可能性があります。

●どうしても表をスクロールさせるためのCSSコードを複数、スタイルシートに書き込む場合は、同一ページ（同じ記事内）では、違うCSSコードを使った表を同時に作成しない。

同じページ内（同じ記事内）で異なるCSSコードを使った表を同時に作成すると、CSSコードが干渉、競合して、表のレイアウトが崩れたり、表の機能が働かない、色が変化する、などの不具合が起きる場合があります。

そのためできるだけ、スクロールする表を作るCSSは、1つだけに絞ってスタイルシートに書き込むのが望ましいです。

もし、どうしても複数のCSSをスタイルシートに書き込む場合は、同じ記事内、同じページ内で、同時に使わないことが望ましいです！

そういう私も表をスクロールさせるコードを2つスタイルシートに記入しています。しかし、同一記事内では、同時に異なるCSSコードを使った表は、作成しません。

スクロールする表を作る前の事前知識

まずは、基本的な説明です。

そのため、CSS側、HTML側に、コードを入力する方法を知っている方は、この章を飛ばして結構です。

この章は、ワードプレスのCSS側に以下のコードを入力、HTML側に以下のコードを入力という意味が分からない方にやり方を説明するものです。

CSS側にコードを入力する方法

1、ワードプレスのダッシュボードを開きます

2、ワードプレスのダッシュボードの左側のメニューの「外観」にマウスカーソルを合わせます。すると新たにメニューが表示されますので、その中の「テーマファイルエディター」をクリックします。

3、「テーマを編集」という画面が開きます。
自分が使用しているワードプレスのテーマが子テーマ（child）の場合は、子テーマになっていることを確認して下さい。

私の場合は、Simplicity2の子テーマを利用していますので、「Simplicity2 child」と表示されています。

※恐らく、子テーマを使用している方は、自動的に子テーマが選択されているはずですが、一応確認して下さい。

4、次に、CSS側にコードを入力しますが、基本的には、「スタイルシート」に書き込みます。

もし、それ以外の場所を指定している場合は、その場所に、コードを書き込んでください。

以下のように選択されているかを確認して下さい。！

5、スタイルシートの余白にコードを入力します。
そして、コードの入力が終わったら「ファイルを更新」をクリックします。

これでCSS側の作業は終了です。

HTML側にコードを入力する方法

html側とは、記事の投稿画面で記事を書きこむ場所のことです。

ワードプレスの旧エディターで「ビジュアル」画面でのやり方です。

私は、現在もワードプレスの旧エディターを使っていますので、旧エディターのやり方を紹介します。
※ブロックエディターを使っている方は、プラグインで行えますので、ブロックエディターのやり方を説明する必要はないと思われます。

1、記事の投稿画面を開いて、表（スクロール機能有り）を挿入する場所に、マウスカーソルを合わせます。

2、次に、そのままの状態で、ワードプレスの上部の操作画面で「insert HTML」をクリックします。
＜/＞このようなアイコンが上部のメニューにあると思います。

3、クリックしたら、上部に入力画面が新たに表示されますので、その入力欄にHTMLコードを入力します。入力が終わったら「OK」をクリックします！

これで、HTML側の作業が終了です。

上記の入力方法が、基本的に「CSS」「HTML」コードを入力する際に共通する流れになります。

作った表が本当に横にスクロールするか簡単にチェックする方法

作った表の一行目のセル（表を構成している四角のブロック）にアルファベットの「a」を10文字ぐらい入力してみるとチェックできます。

以下のような感じです！

投稿画面をはみ出した部分の表を表示させるには、

上記の表は、スクロールバーが下についていますが、記事の投稿画面では、スクロールバーは表示されません。

そんな時は、表の中のセル（どこでもいい）の中で、マウスのホイールを押した状態で左右に動かしてください。それではみ出した部分を確認することができると思います。

この方法は、公開されている表がスクロール式なら、公開画面でもスクロールさせることができます。

では、実際にスクロールする表を作ってみましょう！

実際に表を作ってみる！

それでは、実際に、以下の表の作り方を紹介していきます。

●横にスクロールのみ可能な表

●横にスクロールのみ可能な表で、縦軸の1列目が固定で追従式

●縦、横にスクロール可能な表（縦軸か横軸のどちらかだけ固定で追従式）

横にスクロールする表（縦軸の1列目の追従なし）を作りたい場合！

ワードプレスのテーマ：Simplicity2で動作確認しましたが、問題ありませんでした。ちなみに使用したブラウザは、グーグルクロームです。

それほど本格的な表は作らない。

単純に横にはみ出した部分、長い部分を横にスクロールさせて表示したい方に向いています。

そのため、左端の1列目は、固定されず、追従式ではありません。

※これは、すべてにおいていえることですが、
表を導入した後は、使用環境が、皆さん、それぞれ違いますので、ちゃんと表示されているか、PC、スマートフォンでレイアウトのチェックを行うことをお勧めします！

CSS側

/* テーブルを横スクロール */
table {
 width: 100%;
}

/*tableをスクロールさせる*/
/*tableのセル内にある文字の折り返しを禁止*/
.scroll {
 overflow: auto;
 white-space: nowrap;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar {
 height: 5px;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-track {
 background: #F1F1F1;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}

引用元：WordPressの特定の表だけ横スクロールさせる方法【コピペで簡単！】
URL：https://keizokuhachikara.info/table-scroll/

HTML側

<div class="scroll">
ここに表のコードを入力してください
</div>

引用元：WordPressの特定の表だけ横スクロールさせる方法【コピペで簡単！】

URL：https://keizokuhachikara.info/table-scroll/

ワードプレスの投稿画面の右上で、「ビジュアルモード」から「テキストモード」に変更して表（テーブル）の最初の行に<div class=”scroll”>
最後の行に、</div>を入力して表のコードをはさんで下さい。

それでもやり方よくわからない方は、今回引用させていただいた
URL：https://keizokuhachikara.info/table-scroll/
でとても詳しく説明されています。

実際に作った表

上記だとわかりにくいので以下のようにしてみました

アルファベットの「a」を横軸の1段目のセルにたくさん入力してみました。

どうでしょうか？

ちゃんとスクロールバーが表示されて横にスクロールできるはずです。

ちなみに、表が投稿画面からはみ出てしまったときに、はみ出てしまった部分（見えない部分）を簡単に表示させる方法については、

この記事の第5章に書いてありますので参考にしてください。

• 5.1 投稿画面をはみ出した部分の表を表示させるには、

横にスクロールのみ可能な表で、縦軸の1列目が固定で追従式の表を作りたい

ワードプレスのテーマ：Simplicity2で動作確認しましたが、問題ありませんでした。ちなみに使用したブラウザは、グーグルクロームです。

CSS側

div.fixed-box-tate {
width:100%;
height:100%;
background: #fff;
border:1px solid #2e79b5;
overflow:auto;
}
table.tate {
width: 1200px;
border-collapse: collapse;
border: 1px solid #ccc;
}
table.tate th,
table.tate td {
width: 200px;
height: 70px;
vertical-align: middle;
padding: 0 15px;
border: 1px solid #ccc;
}
table.tate .fixed01 {
position: sticky;
left: 0;
color: #fff;
background: #2e79b5;
font-weight: bold;
text-align: center;
}
table.tate .fixed01:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid #ccc;
}

引用元：CSS テーブル（表）の見出し部分（一部）を固定してスクロール 4パターン
URL：https://pc-walk.com/css-sticky-table/

HTML側

<div class="fixed-box-tate">
<table class="tate">
<tr>
<th class="fixed01">見出し</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="fixed01">見出し</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="fixed01">見出し</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="fixed01">見出し</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="fixed01">見出し</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>
</div><!-- fixed-box-tate -->

引用元：CSS テーブル（表）の見出し部分（一部）を固定してスクロール 4パターン
URL：https://pc-walk.com/css-sticky-table/

この方のサイトは素晴らしです！

追従式の基本的なスタイルをすべて掲載してくれています。
●縦軸の1列目固定、追従式、横スクロールのみ、
●横軸の1行目固定、追従式、縦スクロールのみ、
●縦軸の1列目、横軸の1行目固定、追従式、縦、横スクロール式

などを紹介してくれています。

今回の記事の表は、

「【2】テーブルの列（縦軸）を固定してスクロールする」から引用、させて頂いています。

実際に上記のコードで作った表

本来なら実際に、ここに書き込みたいのですが、今回3つの表を紹介しましたが、2つ目と3つ目のCSSが干渉して、同一ページに3つの表を載せると、うまく表示できませんでした。

もちろん、同一ページに、1種類の表を作成する場合は、下記のように問題なく表示されます。

基本形

横長になると

以下のように、縦軸の1列目が追従して横にスクロールできます！

引用元：CSS テーブル（表）の見出し部分（一部）を固定してスクロール 4パターン

URL：https://pc-walk.com/css-sticky-table/

上記のサイトのコードを使わさせていただきまして、表を作ってみました。他にも追従式の表が紹介されていますので、参考にされるとよいと思います。

縦、横にスクロール可能な表（縦軸のみ固定で追従式）

ワードプレスのテーマ：Simplicity2で動作確認しましたが、問題ありませんでした。ちなみに使用したブラウザは、グーグルクロームです。

CSS側

/************************************
** 横長テーブル
************************************/
.p-sticky-table{
white-space: nowrap;
line-height:1.6;
}
.p-sticky-table table{
border:none;
border: 1px solid #dedede;
border-bottom: none;
border-collapse: collapse;
word-break: break-all;
table-layout: fixed;
display:block;
overflow:scroll;
max-height: 80vh;
}
.p-sticky-table thead th:first-child {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 3;
}
.p-sticky-table thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
text-align:center;
}
.p-sticky-table tbody th:first-child{
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
border:none;
white-space: normal;
min-width: 130px;
}
.p-sticky-table th, .p-sticky-table td {
min-width: 50px;
text-align: left;
font-size: 16px !important;
position: relative;
padding: 13px !important;
color: #333;
border: none !important;
z-index: 0;
vertical-align:middle !important;
background:#fff;
}
.p-sticky-table th{
background:#f0f9ff !important;
letter-spacing: 1px;
font-weight: 500 !important;
color: #555 !important;
}
.p-sticky-table tr{
border-bottom:none !important;
}
.p-sticky-table img{
margin: 10px auto;
display: block;
padding: 0;
max-width: 80% !important;
}
.p-sticky-table table th::before, .p-sticky-table table td::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
z-index: -1;
}
/* スマホ */
@media screen and (max-width: 560px) {
.p-sticky-table table {
max-height: 60vh;
}
.p-sticky-table thead th:first-child, .p-sticky-table tbody th:first-child {
min-width: 25vw;
}
.p-sticky-table th, .p-sticky-table td {
font-size: 12px !important;
padding: 7px !important;
}
}
/* 中央寄せ */
.pst-center td {
text-align: center;
}

引用元（作者様）：【コピペ簡単】ヘッダー固定、スクロールヒントを表示させるテーブル【WordPress】
https://ponhiro.com/fixed-scroll-table/

HTML側

<div class="p-sticky-table">
<table class="js-scrollable">
<tbody>
<tr>
<th>1行見出し(左)</th>
<td>1行1列</td>
<td>1行2列</td>
<td>1行3列</td>
<td>1行4列</td>
<td>1行5列</td>
<td>1行6列</td>
<td>1行7列</td>
<td>1行8列</td>
</tr>
<tr>
<th>2行見出し(左)</th>
<td>2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
<td>2行4列</td>
<td>2行5列</td>
<td>2行6列</td>
<td>2行7列</td>
<td>2行8列</td>
</tr>
<tr>
<th>3行見出し(左)</th>
<td>3行1列</td>
<td>3行2列</td>
<td>3行3列</td>
<td>3行4列</td>
<td>3行5列</td>
<td>3行6列</td>
<td>3行7列</td>
<td>3行8列</td>
</tr>
<tr>
<th>4行見出し(左)</th>
<td>4行1列</td>
<td>4行2列</td>
<td>4行3列</td>
<td>4行4列</td>
<td>4行5列</td>
<td>4行6列</td>
<td>4行7列</td>
<td>4行8列</td>
</tr>
<tr>
<th>5行見出し(左)</th>
<td>5行1列</td>
<td>5行2列</td>
<td>5行3列</td>
<td>5行4列</td>
<td>5行5列</td>
<td>5行6列</td>
<td>5行7列</td>
<td>5行8列</td>
</tr>
</tbody>
</table>
</div>

引用元（作者様）：引用元（作者様）：【コピペ簡単】ヘッダー固定、スクロールヒントを表示させるテーブル【WordPress】
https://ponhiro.com/fixed-scroll-table/

基本形！縦横スクロール！縦軸固定で追従式！

この表のすごいところは、

CSSで作る通常のスクロール式の表と違って、ワードプレスの標準の表の機能を使って、列を増やしたり、行を増やしたりできます。

通常、スクロールタイプで縦軸固定式の場合は、ワードプレスの標準の表の機能から行を増やすとその行だけ追従式になりません。

しかし、この表は、そういうことがなく、簡単に列、行を増やすことができます。

既に完成した表を作り直す場合、項目名や数値などを新しい表にコピーする際は、「プレーンテキストとして貼りつける」で行った方がいいと思います。

また、コードを若干変えるだけで、縦軸固定追従式は、変わりませんが、さらに、縦軸を全体表示にして、横スクロールのみにすることもできます。

また、私は、CSSコードを若干変更させて頂き、使わさせてもらっていますが、そのため縦軸全体表示、横スクロールのみ可能にできますが、表のレスポンシブを崩せば、すぐに縦横スクロールにもどります。簡単にいうと、表の端（四隅）をマウスでちょっと引っ張ってやるだけです。縦軸全体表示に戻したい場合は、最終章に書いてあるやり方で簡単に縦軸全体表示に戻ります。

また、さらにすごいのは、私は、作者様のオリジナルのCSSコードの2行を削除して使用させて頂いていますが、この表は、CSSで作ったにも関わらず、表の余白をマウスで押し上げるようにするだけで余白をなくすことができます。

通常、普通の表でも余白をなくすのは、結構面倒です、そして、CSSコードで作った表に関しては、基本的に、表のセルの余白をなくすことは、CSSコードを変更しないとできないはずなのですが、この表は、表の下から上に順番にマウスでセルを押し上げていくようにしてセルの縦の余白をなくしていくことできました。

上記の方法を行って、面白いのは、投稿画面では、セルの余白が変わっていないのに、公開画面ではセルの余白が消えている場合もあります。

そして、その作業が終わってレイアウトが、やや崩れた場合は、最終章で書いてある方法で簡単に綺麗なレイアウトに戻すことができました。

この方法は、作者様のCSS側のコードの一部を変更しないとできません。

そのため、作者様の許可をもらっていませんので、申し訳ありませんが、コードをここで公開することはできません。

※自分のブログなどで、コードの変更方法を公開しないで、自分で試す場合は、必ず自己責任で行って下さい！

表に不具合が起きたら～対策方法！

もちろん、すべての場合にうまく対処できるとは限りませんが、スクロール機能付きの表を作成したのに、レイアウトが崩れるような場合は、

1、表の全体を選択して、

2、ワードプレスの操作画面で、表（テーブル）のアイコンをクリック、

3、「表のプロパティ」をクリック、

4、表のプロパティの画面で、幅を「100％」、高さを空欄にして何も数字を入れないで、「OK」をクリックするとなおる場合があります。

また、上記の方法を行ってもうまくいかない場合は、古いキャッシュが残っている場合がありますので、一度ワードプレスの投稿画面を保存してから、ワードプレスを再起動するとうまくなおっている可能性もあります。

※すべての場合で通用するとは限りません。