【コピペ簡単】ヘッダー固定、スクロールヒントを表示させるテーブル【WordPress】

2020.05.30

更新情報：2019/12/26 仕様大幅変更しました。

コンテンツ量が多いテーブル(表)をWordPressで作るとき、こんな悩みありませんか？

表が崩れる
コンテンツが多すぎて見にくい

特にスマホで見たときに表がぐちゃぁって崩れることありますよね。

そんなあなたにコピペでできるヘッダー固定テーブルを紹介します。

完成形はこちら！

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し	1行1列	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列
4行見出し	4行1列	4行2列	4行3列	4行4列	4行5列	4行6列
5行見出し	5行1列	5行2列	5行3列	5行4列	5行5列	5行6列
6行見出し	6行1列	6行2列	6行3列	6行4列	6行5列	6行6列
7行見出し	7行1列	7行2列	7行3列	7行4列	7行5列	7行6列
8行見出し	8行1列	8行2列	8行3列	8行4列	8行5列	8行6列
9行見出し	9行1列	9行2列	9行3列	9行4列	9行5列	9行6列
10行見出し	10行1列	10行2列	10行3列	10行4列	10行5列	10行6列

仕様はこんな感じ

仕様

スクロールヒント表示
PC：閲覧画面の高さ80%を超えたら上部見出し固定追尾
スマホ：閲覧画面の高さ60%を超えたら上部見出し固定追尾
左見出し固定追尾
左見出しの横幅は固定
その他セルの横幅は文字数依存

デメリットは「InternetExplorerでは見出し固定がされない」「上部固定時にiPhoneで見るとぐわんぐわん動く」の2点です。

この記事はWordPressユーザー向けに書いており、誰でもコピペでできるようになっています。

クリックでジャンプ

ヘッダー固定、スクロールヒントを表示させるテーブル
デメリット：2つの我慢ポイント
1. デメリット1:InternetExplorerで見出し固定されない
2. デメリット2:iPhoneで見るとぐわんぐわん動く
コピペで簡単！ヘッダー固定テーブルの作り方
2019/12/26以前にカスタマイズ済の方
アレンジ用HTML、CSS
1. 中央配置
2. カラーを変更する
導入済みのブログ、サイトを紹介させてください

ヘッダー固定、スクロールヒントを表示させるテーブル

まず、仕様について説明していきます。

作り方を見たい方はスキップ！！

仕様1：スクロールヒント表示

スクロールヒントは名前の通りスクロールができることを知らせるアイコンです。アップルップルのライブラリを使って表示させています。

さわると非表示、時間で非表示、色をホワイトに変更するなどのカスタマイズ可能です。

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	1行1列	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列

仕様2：上部見出し固定

上部見出し固定はデバイスの閲覧画面の高さによって固定するかしないか変わります。

パソコンで見たとき：画面の高さの80%を超えたテーブルは固定スクロール。

スマホで見たとき：画面の高さの60%を超えたテーブルは固定スクロール。

つまり、テーブルは必ず画面内に収まるということです。

試しにブラウザの高さを縮めてみると確認できるかと思います。

仕様3：左見出し固定

高さが規定サイズに満たない場合は左見出しのみ固定されます。

左見出しのサイズは固定しています。変更するにはCSSを変更するしかありません。

デフォルトは

PC：130px
スマホ：画面の25%

に設定してあります。

仕様4：セルの幅は文字数に依存

セルの横幅は文字数に依存しています。

一番文字数が多いセルに合わせて列の幅が決定します。

幅を変更したいときは改行を使って調整します。

例えば…

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	ああああああああああああああああああああああああああ	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列

これだと1列目が横に長すぎるので改行を入れます。

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	ああああああああああああああああああああああああああ	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列

改行がうまくできない場合は<br>タグで改行してください。

デメリット：2つの我慢ポイント

このテーブルはデメリットが2点あります。

デメリット1:InternetExplorerで見出し固定されない

いわゆるIEには対応していません。

IEでは固定されずそのままスクロールされます。

IEのシェアは12%ほどだそうです。(2019/11)

参考：WebブラウザシェアランキングTOP10

デメリット2:iPhoneで見るとぐわんぐわん動く

上見出し固定時、iPhoneで見るとスクロールバウンスが激しくなります！

左見出し固定のみでもスクロールバウンスは発生していますが上下に動かないのでそんなに気になりません。

iPhoneユーザーが多いサイトでは逆に使いにくくなるかもしれません。

調べたら現状修正する方法はないとか？修正方法をご存知の方いれば教えていただけると助かります！

コピペで簡単！ヘッダー固定テーブルの作り方

2019/12/26以前にカスタマイズ済みの方はこちらへスキップ！！

手順は以下の通りです。

手順

STEP1
CSSコピペ
style.cssにコードをコピペ
STEP2
function.phpコピペ
スクロールヒント使いたい人限定
STEP3
HTMLコピペ
投稿画面でHTMLコピペ

STEP1：CSSをコピペ

下記CSSをコピペしていきます。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

/************************************
** 横長テーブル
************************************/
.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;
}

Copy

STEP2：function.phpにコードコピペ

スクロールヒントを表示させたい人限定です。アップルップルのライブラリを使って表示させます。

下記コードを子テーマのfunction.phpにコピペしてください。

必ず編集前のfunction.phpを残しておくこと！
アップ後サイトに繋がらなくなったらすぐに戻してね！

function p_table_func() {
echo <<< EOM
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script>

<script>
    window.addEventListener('DOMContentLoaded', function(){
        new ScrollHint('.js-scrollable', {
        remainingTime: 3000,
      i18n: {
        scrollable: 'スクロールできます'
      }
});
    });
</script>
EOM;
}
add_action( 'wp_footer', 'p_table_func' );

Copy

「remainingTime: 3000,」は自動で非表示になる時間です。スクロールするまで常時表示させておきたい人は消してください。デモは消してあります。

「スクロールできます」は表示される文章です。好きに変更してください！

ちなみに指の背景色を白に変えるには「remainingTime: 3000,」の下に

scrollHintIconAppendClass: 'scroll-hint-icon-white',

Copy

を入れればOK！

STEP3：HTMLをコピペ、入力

ここまでで準備は整ったのであとは投稿画面でHTMLを入力するのみです。

クラシックエディタの方はAddQuicktag。グーテンベルクの方は「カスタムHTML+再利用ブロック」を使えばいつでも呼び出せます。

下記コードを投稿画面にコピペし、コンテンツを入力します。

<div class="p-sticky-table">
<table class="js-scrollable">
<thead>
<tr>
<th>見出し(上)</th>
<th>1列見出し(上)</th>
<th>2列見出し(上)</th>
<th>3列見出し(上)</th>
<th>4列見出し(上)</th>
<th>5列見出し(上)</th>
<th>6列見出し(上)</th>
</tr>
</thead>
<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>
</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>
</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>
</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>
</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>
</tr>
</tbody>
</table>
</div>

Copy

行を増やす：<tr> ~ </tr>をコピー
行を減らす：<tr> ~ </tr>を削除
列を増やす：それぞれ1行ずつ<td> ~ </td>追加
列を減らす：それぞれ1行ずつ<td> ~ </td>削除

上部見出しが必要ない場合：

1行見出し(左)	1行1列	1行2列	1行3列	1行4列	1行5列	1行6列	1行7列	1行8列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列	2行7列	2行8列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列	3行7列	3行8列
4行見出し(左)	4行1列	4行2列	4行3列	4行4列	4行5列	4行6列	4行7列	4行8列
5行見出し(左)	5行1列	5行2列	5行3列	5行4列	5行5列	5行6列	5行7列	5行8列

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>

Copy

2019/12/26以前にカスタマイズ済の方

2019/12/26以前にカスタマイズ済の方は下記CSSを新規で追加するだけで変更可能となっています。

/************************************
** 追加
************************************/
.p-sticky-table table {
  max-height: 80vh;
  border: 1px solid #dedede !important;
  word-wrap: break-word;
}
.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 {
  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;
}
.p-sticky-table th {
  letter-spacing: 1px;
  color: #555 !important;
  font-weight:500 !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;
}
.p-sticky-table table, .p-sticky-table tr {
  border: none;
}
/* スマホ */
@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;
}

Copy

アレンジ用HTML、CSS

配置、カラーパターンのアレンジを紹介します。

中央配置

デフォルトでは文字が左寄せになっています。

以下のように真ん中に寄せたい場合もあるかと思います。

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	○	○	×	×	○	×
2行見出し(左)	×	○	○	×	○	×
3行見出し(左)	○	×	○	×	○	×
4行見出し(左)	○	○	×	×	×	○
5行見出し(左)	×	○	×	○	○	×
6行見出し(左)	○	○	○	×	×	×
7行見出し(左)	×	×	○	○	○	×
8行見出し(左)	×	○	×	○	×	○
9行見出し(左)	○	×	○	×	×	○
10行見出し(左)	○	○	×	×	×	○

コピペしたHTMLを少し書き換えれば中央配置になります。

一番上のdivタグに「pst-center」を追加すればOK！

<div class="p-sticky-table pst-center">

カラーを変更する

全部で10色用意しました！

ライトイエロー

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	1行1列	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列

変更方法を見る

1.CSSを追加

/* ライトイエロー */
.pst-light-yellow thead th, .pst-light-yellow tbody th {
  background: #fffbf0 !important;
}

Copy

2.HTML編集

コピペしたHTMLを少し書き換えれば色が変わります。

一番上のdivタグに「pst-light-yellow」を追加すればOK！

<div class="p-sticky-table pst-light-yellow">

ライトピンク

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	1行1列	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列

変更方法を見る

1.CSSを追加

/* ライトピンク */
.pst-light-pink thead th, .pst-light-pink tbody th {
  background: #fff1f0 !important;
}

Copy

2.HTML編集

コピペしたHTMLを少し書き換えれば色が変わります。

一番上のdivタグに「pst-light-pink」を追加すればOK！

<div class="p-sticky-table pst-light-pink">

ライトグリーン

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	1行1列	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列

変更方法を見る

1.CSSを追加

/* ライトグリーン */
.pst-light-green thead th, .pst-light-green tbody th {
  background: #f2fbef !important;
}

Copy

2.HTML編集

コピペしたHTMLを少し書き換えれば色が変わります。

一番上のdivタグに「pst-light-green」を追加すればOK！

<div class="p-sticky-table pst-light-green">

ライトグレー

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	1行1列	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列

変更方法を見る

1.CSSを追加

/* ライトグレー*/
.pst-light-grey thead th, .pst-light-grey tbody th {
  background: #f1f1f1 !important;
}

Copy

2.HTML編集

コピペしたHTMLを少し書き換えれば色が変わります。

一番上のdivタグに「pst-light-grey」を追加すればOK！

<div class="p-sticky-table pst-light-grey">

ブルーストライプ

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	1行1列	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列
4行見出し(左)	4行1列	4行2列	4行3列	4行4列	4行5列	4行6列
5行見出し(左)	5行1列	5行2列	5行3列	5行4列	5行5列	5行6列

変更方法を見る

1.CSSを追加

/* ブルーストライプ */
.pst-blue thead th, .pst-blue tbody th {
  background: #daf5ff !important;
}
.pst-blue tr:nth-child(odd) td {
  background: #fff;
}
.pst-blue tr:nth-child(even) td {
  background: #effafd;
}
.pst-blue table th::before {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

Copy

2.HTML編集

コピペしたHTMLを少し書き換えれば色が変わります。

一番上のdivタグに「pst-blue」を追加すればOK！

<div class="p-sticky-table pst-blue">

イエローストライプ

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	1行1列	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列
4行見出し(左)	4行1列	4行2列	4行3列	4行4列	4行5列	4行6列
5行見出し(左)	5行1列	5行2列	5行3列	5行4列	5行5列	5行6列

変更方法を見る

1.CSSを追加

/* イエローストライプ */
.pst-yellow thead th, .pst-yellow tbody th {
  background: #fff0bc !important;
}
.pst-yellow tr:nth-child(odd) td {
  background: #fff;
}
.pst-yellow tr:nth-child(even) td {
  background: #fffbed;
}
.pst-yellow table th::before {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

Copy

2.HTML編集

コピペしたHTMLを少し書き換えれば色が変わります。

一番上のdivタグに「pst-yellow」を追加すればOK！

<div class="p-sticky-table pst-yellow">

ピンクストライプ

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	1行1列	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列
4行見出し(左)	4行1列	4行2列	4行3列	4行4列	4行5列	4行6列
5行見出し(左)	5行1列	5行2列	5行3列	5行4列	5行5列	5行6列

変更方法を見る

1.CSSを追加

/* ピンクストライプ */
.pst-pink thead th, .pst-pink tbody th {
  background: #ffe2e2 !important;
}
.pst-pink tr:nth-child(odd) td {
  background: #fff;
}
.pst-pink tr:nth-child(even) td {
  background: #fff1f1;
}
.pst-pink table th::before {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

Copy

2.HTML編集

コピペしたHTMLを少し書き換えれば色が変わります。

一番上のdivタグに「pst-pink」を追加すればOK！

<div class="p-sticky-table pst-pink">

グリーンストライプ

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	1行1列	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列
4行見出し(左)	4行1列	4行2列	4行3列	4行4列	4行5列	4行6列
5行見出し(左)	5行1列	5行2列	5行3列	5行4列	5行5列	5行6列

変更方法を見る

1.CSSを追加

/* グリーンストライプ */
.pst-green thead th, .pst-green tbody th {
  background: #dcedc1 !important;
}
.pst-green tr:nth-child(odd) td {
  background: #fff;
}
.pst-green tr:nth-child(even) td {
  background: #fafff2;
}
.pst-green table th::before {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

Copy

2.HTML編集

コピペしたHTMLを少し書き換えれば色が変わります。

一番上のdivタグに「pst-green」を追加すればOK！

<div class="p-sticky-table pst-green">

グレーストライプ

見出し(上)	1列見出し(上)	2列見出し(上)	3列見出し(上)	4列見出し(上)	5列見出し(上)	6列見出し(上)
1行見出し(左)	1行1列	1行2列	1行3列	1行4列	1行5列	1行6列
2行見出し(左)	2行1列	2行2列	2行3列	2行4列	2行5列	2行6列
3行見出し(左)	3行1列	3行2列	3行3列	3行4列	3行5列	3行6列
4行見出し(左)	4行1列	4行2列	4行3列	4行4列	4行5列	4行6列
5行見出し(左)	5行1列	5行2列	5行3列	5行4列	5行5列	5行6列

変更方法を見る

1.CSSを追加

/* グレーストライプ */
.pst-grey thead th, .pst-grey tbody th {
  background: #dde5ea !important;
}
.pst-grey tr:nth-child(odd) td {
  background: #fff;
}
.pst-grey tr:nth-child(even) td {
  background: #f1f4f7;
}
.pst-grey table th::before {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

Copy

2.HTML編集

コピペしたHTMLを少し書き換えれば色が変わります。

一番上のdivタグに「pst-grey」を追加すればOK！

<div class="p-sticky-table pst-grey">

導入済みのブログ、サイトを紹介させてください

「この記事を見て導入したよ！」という方でSNSやブログでこの記事を紹介していただいた場合(ココ大事！)、こちらでブログやサイトを紹介させていただきます！

その際テーブルを使っている記事を教えてください。長いタイトルは少し省略させていただきます！

たくさんのご紹介ありがとうございます！これで締め切らせていただきます！

名前:ころもん :投稿日：2019/10/19(土) 10:08:01 ID：Q0NDAyMzI
デザインが綺麗で、使いやすいテーブルを教えてくださり、ありがとうございます！もし可能でしたら、左の見出しだけでなく、上部の見出しも固定する方法も教えていただけたら嬉しいです。
返信

名前:ぽんひろ :投稿日：2019/10/20(日) 22:02:38 ID：AzNTkyNTM
＞ころもんさん
ありがとうございます！
いつか書きます！！
返信

名前:山田 :投稿日：2019/10/19(土) 16:27:52 ID：UwMDkwOTg
こんにちは。スマホ表示でもテーブルを見やすくするため、こちらの記事を参考にさせてもらおうと思います。いつも有益な情報ありがとうございます。
1点質問なのですが、「外観→カスタマイズ→追加CSS」にCSSを貼り付けようとしたら、
position: -webkit-sticky;
position: sticky;
この2行に注意マークが表示され、反映されません。
詳しく見なければ原因はわからないでしょうけど、WordPressのテーマによっては利用できない場合もあるということでしょうか？
ちなみに、テーマは「ワードプレステーマTCD」を利用中です。
回答よろしくお願いします。
返信

名前:山田 :投稿日：2019/10/19(土) 22:58:11 ID：A2Mjg4OTk
黄色のビックリマークがついたままで反映されました！！
お騒がせしました。有益な情報ありがとうございます。
返信

名前:ぽんひろ :投稿日：2019/10/20(日) 22:01:36 ID：AzNTkyNTM
＞山田さん
良かったです！！
返信

名前:田中 :投稿日：2019/12/03(火) 13:23:22 ID：A2MTkyODg
こんにちは。有益な情報ありがとうございます。
1点質問させてください。記載のとおりに設定してみたのですが、表の幅や高さの数値が自動で設定されてしまい、サンプルよりもずいぶん大きなテーブルになってしまいます。
なにか対策はありますか？
返信
名前:田中 :投稿日：2019/12/03(火) 15:40:30 ID：A2MTkyODg
ググってみたら解決策がありました。ありがとうございます。
参考までに。
https://nohosma.com/wordpress-table-customize/
返信

名前:ぽんひろ :投稿日：2019/12/08(日) 13:57:01 ID：M3MTk3ODQ
＞田中さん
ありがとうございます。
解決されたようで良かったです！
返信

名前:あんころもっちもち :投稿日：2019/12/12(木) 10:05:31 ID：MzMTgyNTc
ぽんひろさん。
素敵なデザインですぐに取り入れさせていただきました！
ありがとうございます。
１点のみなのですが、
テーブルタグのボーダーが内側の部分といえばいいでしょうか。
一切くぎりの線がないと思います。
ここのボーダーを色や線を出すことはできるのでしょうか？
返信

名前:ぽんひろ :投稿日：2019/12/19(木) 15:19:32 ID：U5MDY4ODg
＞あんころもっちもちさん
ありがとうございます。
線の追加パターンは近いうちに更新するので少々お待ちください！
返信

名前:匿名 :投稿日：2019/12/12(木) 12:41:24 ID：MzMTgyNTc
各テーブルタグの横幅が、固定にすることができないのですが、
固定にはできるのでしょうか？
widthを入れたのですが、反応がありませんでした。
返信

名前:ぽんひろ :投稿日：2019/12/19(木) 15:20:29 ID：U5MDY4ODg
仕様上、文字の長さに依存するようになっています。
文字の改行で調整は難しいでしょうか？
返信

名前:そら :投稿日：2023/02/04(土) 10:11:11 ID：M1MzMwMjE
元のコメントの方（匿名さん）とは違う人物ですが、どうやってもうまくいかないので教えて下さい。。
セル幅を固定する方法はないのでしょうか？
仕様上、セル幅は文字数に応じて、とのことですが、セル幅を固定して、自動改行にするようにしたいです。CSSでtr・thのmax-widthを指定したりwhite-spaceをnormalにしても、どうしてもセル幅が固定されません。文字数に応じてセル幅が変わってしまうと、列によって幅が異なってしまうので、バランスよく整えたいです。
もし方法があれば教えて頂けますと幸甚です。宜しくお願い致しますm(__)m
返信

名前:まめしば :投稿日：2020/01/16(木) 06:07:56 ID：E4NTk2NTg
こんにちは。とても便利な機能の開発、ありがとうございます。
Table Pressを使って本機能を活用したいのですが、うまく反映できません。
https://g-tech-log.com/wordpress/howto-tablepress2/
上記リンク先の内容を参考に、以下のようにしてみました。
・プラグインのオプションに.p-sticky-tableの追加CSSを記述　→12/26以前のもの、12/26以降のものどちらも試したが、うまくいかない
・テーブル作成画面の「テーブルのオプション」で追加のCSSクラスを「p-sticky-table」に指定
・「このテーブルで以下のDataTables JavaScriptライブラリ機能を使用する：」を有効にしたり、無効にしたり　→どちらもダメ
・「テーブルの最初の行をテーブル見出しにする」を有効にしたり、無効にしたり　→どちらもダメ
うまく反映させるには、手順をどのように修正すればよいでしょうか。
お忙しいところ恐れ入りますが、ご確認お願いいたします。
返信

名前:ぽんひろ :投稿日：2020/01/16(木) 13:39:57 ID：g4MjE5Mjc
＞まめしばさん
ありがとうございます。
TablePressは使ったことないのですがHTMLを見たところtableタグにclassを追加してますよね。
当カスタマイズは少しイレギュラーな方法でtableをdivタグで囲って、そのdivタグにp-sticky-tableを付与しています。
ですのでTablePressのショートコードを<div class="p-sticky-table">で囲い、TablePressの追加CSSにjs-scrollableを入れたらいかがでしょうか？
どちらにせよCSSが競合する可能性は高いので崩れてしまうかもしれません。その時は新しくCSSを組み直すしかなさそうです。
返信

名前:まめしば :投稿日：2020/01/17(金) 05:23:51 ID：I1OTYyODI
>ぽんひろさん
ご回答いただき、ありがとうございます！
>TablePressのショートコードをで囲い、
TablePressの追加CSSにjs-scrollableを入れたらいかがでしょうか？
どちらにせよCSSが競合する可能性は高いので崩れてしまうかもしれません。
その時は新しくCSSを組み直すしかなさそうです。
こちらを試してみたところ、微妙に見出しだけが固定されましたｗ
ご指摘のとおりCSSの競合が避けられないようなので、ひとまずTablePressは使用しないことにします。
ご丁寧にご助言をいただき、ありがとうございました。
返信
名前:匿名 :投稿日：2020/02/19(水) 17:10:15 ID：gwMTM5NzQ
こんにちは！ぽんひろさん。
私はDiverというテーマを使っています。
表はコピペするだけで作れたのですが色がかわりません。
お手すきな時に教えてください。
返信
名前:Aya :投稿日：2020/02/20(木) 10:13:19 ID：IxNDc0NTk
はじめまして。アラフィフのブログ初心者です。
何とかなるだろうと楽観的な考えでブログを始めまし
たが、ワードプレス、難しくて。ブログに必須の表の挿入は、
スマホ表示がきれいに出来なくて何度もくじけました。
ですが、ぽんひろさんのおかげで、今回無事に挿入完了。
感謝の気持ちでいっぱいです。本当にありがとうございました
返信

名前:ぽんひろ :投稿日：2020/03/11(水) 15:18:52 ID：EyMjExMjA
＞Ayaさん
ありがとうございます！
そういっていただけると嬉しいです！
返信

名前:匿名 :投稿日：2020/02/26(水) 10:01:51 ID：E4NzMyMzU
ぽんひろさんDiverを使ってると前に質問したものです。
コピペのミスでした。
無事色がかわり解決できました。
返信

名前:ぽんひろ :投稿日：2020/03/11(水) 15:19:21 ID：EyMjExMjA
返信遅れて申し訳ないですが…
無事変更されたみたいでよかったです！
返信

名前:あきひろ :投稿日：2020/03/02(月) 16:42:24 ID：kyNTc4NTQ
素敵な記事ありがとうございます。
早速実装いたします。
＞スクロールヒントは名前の通りスクロールができることを知らせるアイコンです。アップルップルのライブラリを使って表示させています。
⇒
スクロールをぜひ、使用したいのですが、
アップルップル様に使用の許諾をとる必要があるのでしょうか？
ホームページを拝見した限り、ライブラリ公開の箇所を見つけることができなかったため念のため確認でした。
返信

名前:ぽんひろ :投稿日：2020/03/11(水) 15:23:44 ID：EyMjExMjA
＞あきひろさん
ありがとうございます。現状は許諾を取る必要はなさそうです。
ありがたく使わせていただきましょう！
返信

名前:カケル :投稿日：2020/03/30(月) 00:39:31 ID：QzNjk0MDE
ぽんひろ様
この記事の表を愛用しています。
パソコンに詳しくないのでとても助かっています。ありがとうございます。
今回質問させていただきたいのは、この記事のコードを反映させた後の話です。
このコードを反映させた後に、ワードプレスについている普通の？テーブルにもスクロールヒントを表示させようと思った時、どのようにすれば良いのかググっても分かりませんでした。（ググる力が足りないだけかも知れませんが。。。）
お時間のある時に、ワードプレスについている表にスクロールヒントを表示させる方法を教えていただけると幸いです。
何卒よろしくお願いいたします。
返信

名前:カケル :投稿日：2020/04/21(火) 18:59:16 ID：U1MDg4NDY
以前ご連絡したカケルと言います。
色々いじっていたらできるようになりました。
ご迷惑をおかけしました。
返信

名前:ゆうも :投稿日：2020/05/01(金) 16:26:36 ID：UzMDc4NjE
いつも参考にさせていただいております。
ありがとうございます。
今回、スクロールヒントのことで質問させていただきたいのですが、
こちらを実装したところ、一見すると問題ないのですが、
スクロールさせようとすると、スペースが無いはずの縦にも動いてしまいます。
COCOONの時は問題なかったのですが、THE THORに変えた途端にこの問題が発生しました。
色々なパターンを試したのですが、二進も三進もいきません。
この縦に動く問題を解決するには、どのように修正すればよいでしょうか。
お忙しいところ恐れ入りますが、ご確認お願いいたします。
その症状がでる記事のURLを貼っておきます。
https://umopress.com/retirement-agency
返信

名前:ぽんひろ :投稿日：2020/05/13(水) 18:00:26 ID：UzNTI2Mzc
＞ゆうもさん
返信遅くなりまして申し訳ございません。
THE THORはテストしてなかったのですがCSSが干渉してるみたいです。
こちらのCSSを追記して確認していただいてもよろしいでしょうか？
.scroll-hint-icon-wrap {
margin-top: 0 !important;
}
返信

名前:ゆうも :投稿日：2020/05/19(火) 17:41:03 ID：g5MDAyMDY
ぽんひろさん＞
こちらこそ、返信が遅くなり大変申し訳ありません！
CSS、追記してみましたところ、完全に直りました！
ホントにホントにありがとうございます。
お問い合わせしました記事は、事情があって現在非公開にしているのですが、
別記事で確認させていただきました。
https://umopress.com/amazon-fire
これからもガンガン使わせていただきます！
お忙しい中、本当にありがとうございました。
返信

名前:けん :投稿日：2020/05/12(火) 23:43:40 ID：kyMjA4Mjg
初めまして。
こちらのヘッダー固定テーブルを使わせて頂いています。
一点お聞きしたいのですが、テーブル内にテキストリンクを挿入するとリンクが反映されません、どうしたら反映されますでしょうか？（テキストリンク部分にリンクの下線は付きますがクリック出来ない状態です）
試しにHTML一番上の
の一行を外して更新してみたらテキストリンクがクリック出来ました。
宜しくお願いいたします。
返信

名前:ぽんひろ :投稿日：2020/05/13(水) 18:04:54 ID：UzNTI2Mzc
＞けんさん
ありがとうございます。
リンクが効かないときのHTMLタグ、もしくは該当ページを見せていただくことは可能でしょうか？
返信

名前:リチャード :投稿日：2020/05/18(月) 15:03:07 ID：UwNzYyOTY
ぽんひろさん、いつも素敵なCSSをありがとうございます。ぽんひろさんのおかげで綺麗なブログに仕上がりつつあります！
こちらの記事なのですが、PCで見ると全く問題ございませんが、スマホ(iPhone のChrome、Safari両方)で見ると表が崩れてしまいます。。
何か原因思い当たることございますでしょうか？
お忙しい中、恐れ入りますが、よろしくお願い申し上げます。
https://www.fermiblog.xyz/entry/try-on-at-home-service
返信

名前:ぽんひろ :投稿日：2020/06/12(金) 16:49:11 ID：M2NjI0NjQ
＞リチャードさん
返信遅くなりまして申し訳ございません。
現状もまだ崩れていますか？
ビジュアルエディタなどで高さの調整をしていればそれが原因かもしれません。
返信

名前:ズーヤン :投稿日：2020/06/07(日) 23:35:25 ID：gzMDA3OTU
有益な記事ありがとうございます。
早速使わせていただいたのですが、スマホで見た時に、見出しを除いて「1行目の高さ」が「１行見出しの高さ」とズレてしまいます。
もし可能であれば、対応をご教示頂けないでしょうか？
返信

名前:ぽんひろ :投稿日：2020/06/12(金) 16:50:37 ID：M2NjI0NjQ
＞ズーヤンさん
返信遅くなりまして申し訳ございません。
ビジュアルエディタなどで高さの調整をしていればそれが原因かもしれません。
あとは実際に見てみないと原因の特定はちょっと難しそうです。
返信

名前:まり :投稿日：2020/08/19(水) 16:27:11 ID：gwODE0NDU
ぽんひろさん
はじめまして。
とても使いやすいカスタマイズの提供ありがとうございます！
横にスクロールできるカスタマイズはよく見かけていましたが、見出しの固定が出来るのがとにかく嬉しいです^^
さっそく試してみたところPCからはバッチリ奇麗に表示されていました。
ですが、スマホからだとスクロールが出来ずに非常に見辛いテーブルになってしまいました。
見切れてしまっているのではなく、スマホの横幅に合わせるために縦に伸びてしまった形です。
やったこととしては、テキストエディタで作った後、ビジュアルエディタにて
・改行
・セルの結合
・個別セル内のセンター寄せ
といったあたりです。
原因として思い当たるようなことはありますでしょうか？
どうぞよろしくお願いいたします。
返信

名前:まり :投稿日：2020/08/19(水) 18:19:13 ID：gwODE0NDU
ぽんひろさん
補足させていただきます。
改めて、こちらに記載されているHTMLコードを何もいじらずに貼り付けたうえで、そのまま公開してみました。
PCとタブレットでは問題なく奇麗に表示されていますが、スマホからだと
・スクロールができない
・スクロールヒントが表示されない
・見出し部分のセルに色がつかない
といった感じで、言ってみればカスタマイズが一切反映されていない状況でした。
少しでも参考になればと思い追記させていただきます。
返信

名前:ぽんひろ :投稿日：2020/10/05(月) 14:37:50 ID：U3NzY2NzU
＞まりさん
返信とっても遅くなりまして申し訳ございません。
カスタマイズが反映されてないということなので、そこの原因を見つける必要があります。
考えられる理由としては
・編集ファイルを間違えている
・親テーマ、別テーマを編集してる
・キャッシュが残ってる
などでしょうか。
返信

名前:ぽんず :投稿日：2020/11/16(月) 10:36:45 ID：YzNTg1NTM
はじめまして
使いやすいタグをありがとうございます
ひとつ質問ですが、文字を白色にしたいのですがどうしたら良いでしょうか？
返信
名前:だい :投稿日：2020/12/29(火) 15:07:45 ID：E5Mjc0NTM
はじめまして
スクロールを横にのみして，縦にスクロールさせない方法はありますか？
縦軸だけは全表示させたいのです．
返信
名前:やました :投稿日：2021/01/22(金) 13:19:10 ID：U1Mjk3ODU
にはcolspan=””がきくようですが
にcolspan=””
を使用すると、スクロールができなくなってしまいます。
お手数おかけいたしますが、解決方法などを教えていただけると幸いです。
よろしくお願いいたします。
返信
名前:やました :投稿日：2021/01/22(金) 13:20:09 ID：U1Mjk3ODU
上のコメントですが。
trにはきくが
thにはきかない
という内容です。
申し訳ございませんでした。
返信
名前:なおすけ :投稿日：2021/05/22(土) 21:04:06 ID：AzNjI0ODY
ぽんひろさん初めまして！
有益なカスタマイズ提供ありがとうございます！
１点ご質問がございます。
私はブログを２サイト運営しています。
提供いただいた内容で編集をおこなったところ、１サイトに関しては問題なくスクロールヒントまで表示されましたが、もう１サイトで全く同じように編集してもスクロールまではうまくいきますが、スクロールヒントの表示がされないという事象が発生しております。
なにか対処法等はありますでしょうか？ご教示いただければ幸いです。
返信
名前:おうちフィットネス管理人 :投稿日：2021/07/14(水) 00:14:58 ID：c5NjQ4ODc
UsefulBlocksPro、有効活用させていただいております。
別件で本スクロール記事のご相談ですが、現在、以下ページでテーマデフォルトの表を使用しています。
https://ouchifit365.net/onlinefitness/comparison/
一部、表の結合などをしたうえで、SEO的に見出しとして判別されるようにしたいですが、本ページ内容で解決されるのでしょうか。
素人の質問で、見当違いでしたら恐縮ですがご教示いただければ幸甚です。
返信
名前:くらげ :投稿日：2021/09/08(水) 20:45:08 ID：U4Njk5Mjk
ぽんひろさん初めまして！
スクロール表のための
有益なカスタマイズ情報ありがとうございます！
一点教えていただきたいことがありコメントさせていただきました。
私はブログテーマ「JIN」を使っていて
この記事に書かれているCSSやHTMLを設定し
スクロール表やスクロールヒントの表示はできたのですが、
すでに公開している記事で
デザインボックス内やRinkerで表示した広告の
「文字がはみ出てしまう」不具合が起きてしまいました。
設定したCSSやHTMLをすべて消すと、デザインの崩れはなくなります。
何が影響しているかわかりますでしょうか？
お手数とは思いますが、回答よろしくお願いします
返信
名前:なかたなか :投稿日：2021/12/07(火) 15:05:27 ID：gwMzMyNjQ
初めまして！ぜひこちらの表をお借りしたいと思うのですが、セル内の余白部分を少なくすることは可能でしょうか？
返信
名前:あべれいじ :投稿日：2022/02/28(月) 17:09:39 ID：A0OTU2NTY
ぽんひろ様
お世話になります。
スクロールするテーブルとても簡単に設置できました。
ありがとうございます。
ひとつだけ、スクロールする必要がないテーブルもこの表と同じ背景色と文字色などで表示させたいのですが、どうしたらよいでしょうか？
もし、CSSとHTMLのコードを教えていただければ有難いです。
背景色は#f0f9ffで作っています。
宜しくお願いします。
返信
名前:あべれいじ :投稿日：2022/02/28(月) 17:17:38 ID：A0OTU2NTY
テーブルを作っているのは以下のページです。
https://taku-cleaning.com/2022/02/25/36/
アフィンガー５で作っています。
返信
名前:やっしー :投稿日：2022/02/28(月) 17:40:37 ID：MzODAxOTQ
ヘッダー固定テーブルを使わせて頂いております。テーマはジンさんのを使っておりまして、Googleで自分のブログを見ると見出し左に画像が表示されとます。FBとかアメブロでは画像が表示されません。教えてください。
アメブロのURLです！https://ameblo.jp/yagaoyuan53/entry-12710745231.html
返信
名前:まそう :投稿日：2023/02/11(土) 23:35:47 ID：IzNDk3NTY
お世話になっております。
いつも素敵なデザインありがとうございます！
質問ですが、こちらの表作成してみたところ、PCだと問題ありませんが
スマホですと各行見出しの上に、それぞれ更に1行挿入された状態となっています。つまり表が崩れています。
テーマはコクーン、普段はクラシックエディタ、Advanced Editor Toolsプラグインを使用しています。
プラグインの「マウスのドラッグでのテーブル、行、列のサイズ変更を可能にする」をオフにしてみるなど、いろいろ試してみました変化がありません。
原因がわかりそうでしたら教えてください。
https://masoiwazuni.com/gps-osusume/
返信

名前:まそう　いわずに :投稿日：2023/03/04(土) 06:42:04 ID：U4MDcxMDE
度々失礼します。ひとまず記事からは外しました！
返信

名前:わんフィール :投稿日：2023/11/22(水) 16:22:10 ID：I0MTk4OTY
こちら使わせていただきました！JSいらずで使いやすくて気に入っています。
iphoneでぐわんぐわん動く挙動は、下記コードをメディアクエリ側に入れるだけで解消されましたので共有いたします★
.p-sticky-table table {
max-height: 60vh;
overscroll-behavior: none;/*横揺れ対応 */
}
https://wanfeel.info/?p=520
返信