Twitterはこちら仕事依頼はこちら

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

見出し固定スクロールヒント付きテーブルの作り方

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。

更新情報: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列

仕様はこんな感じ

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

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

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

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

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

仕様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列

<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やブログでこの記事を紹介していただいた場合(ココ大事!)、こちらでブログやサイトを紹介させていただきます!

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

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

コメント

  1. デザインが綺麗で、使いやすいテーブルを教えてくださり、ありがとうございます!もし可能でしたら、左の見出しだけでなく、上部の見出しも固定する方法も教えていただけたら嬉しいです。

    • >ころもんさん

      ありがとうございます!
      いつか書きます!!

  2. こんにちは。スマホ表示でもテーブルを見やすくするため、こちらの記事を参考にさせてもらおうと思います。いつも有益な情報ありがとうございます。
    1点質問なのですが、「外観→カスタマイズ→追加CSS」にCSSを貼り付けようとしたら、

    position: -webkit-sticky;
    position: sticky;

    この2行に注意マークが表示され、反映されません。
    詳しく見なければ原因はわからないでしょうけど、WordPressのテーマによっては利用できない場合もあるということでしょうか?
    ちなみに、テーマは「ワードプレステーマTCD」を利用中です。
    回答よろしくお願いします。

    • 黄色のビックリマークがついたままで反映されました!!
      お騒がせしました。有益な情報ありがとうございます。

      • >山田さん

        良かったです!!

  3. こんにちは。有益な情報ありがとうございます。
    1点質問させてください。記載のとおりに設定してみたのですが、表の幅や高さの数値が自動で設定されてしまい、サンプルよりもずいぶん大きなテーブルになってしまいます。
    なにか対策はありますか?

  4. ググってみたら解決策がありました。ありがとうございます。
    参考までに。
    https://nohosma.com/wordpress-table-customize/

    • >田中さん

      ありがとうございます。
      解決されたようで良かったです!

  5. ぽんひろさん。
    素敵なデザインですぐに取り入れさせていただきました!
    ありがとうございます。

    1点のみなのですが、
    テーブルタグのボーダーが内側の部分といえばいいでしょうか。

    一切くぎりの線がないと思います。
    ここのボーダーを色や線を出すことはできるのでしょうか?

    • >あんころもっちもちさん

      ありがとうございます。
      線の追加パターンは近いうちに更新するので少々お待ちください!

  6. 各テーブルタグの横幅が、固定にすることができないのですが、
    固定にはできるのでしょうか?

    widthを入れたのですが、反応がありませんでした。

    • 仕様上、文字の長さに依存するようになっています。
      文字の改行で調整は難しいでしょうか?

      • 元のコメントの方(匿名さん)とは違う人物ですが、どうやってもうまくいかないので教えて下さい。。

        セル幅を固定する方法はないのでしょうか?
        仕様上、セル幅は文字数に応じて、とのことですが、セル幅を固定して、自動改行にするようにしたいです。CSSでtr・thのmax-widthを指定したりwhite-spaceをnormalにしても、どうしてもセル幅が固定されません。文字数に応じてセル幅が変わってしまうと、列によって幅が異なってしまうので、バランスよく整えたいです。
        もし方法があれば教えて頂けますと幸甚です。宜しくお願い致しますm(__)m

  7. こんにちは。とても便利な機能の開発、ありがとうございます。
    Table Pressを使って本機能を活用したいのですが、うまく反映できません。

    https://g-tech-log.com/wordpress/howto-tablepress2/

    上記リンク先の内容を参考に、以下のようにしてみました。

    ・プラグインのオプションに.p-sticky-tableの追加CSSを記述 →12/26以前のもの、12/26以降のものどちらも試したが、うまくいかない
    ・テーブル作成画面の「テーブルのオプション」で追加のCSSクラスを「p-sticky-table」に指定
    ・「このテーブルで以下のDataTables JavaScriptライブラリ機能を使用する:」を有効にしたり、無効にしたり →どちらもダメ
    ・「テーブルの最初の行をテーブル見出しにする」を有効にしたり、無効にしたり →どちらもダメ

    うまく反映させるには、手順をどのように修正すればよいでしょうか。
    お忙しいところ恐れ入りますが、ご確認お願いいたします。

    • >まめしばさん

      ありがとうございます。

      TablePressは使ったことないのですがHTMLを見たところtableタグにclassを追加してますよね。

      当カスタマイズは少しイレギュラーな方法でtableをdivタグで囲って、そのdivタグにp-sticky-tableを付与しています。

      ですのでTablePressのショートコード を<div class="p-sticky-table">で囲い、TablePressの追加CSSにjs-scrollableを入れたらいかがでしょうか?

      どちらにせよCSSが競合する可能性は高いので崩れてしまうかもしれません。その時は新しくCSSを組み直すしかなさそうです。

  8. >ぽんひろさん

    ご回答いただき、ありがとうございます!

    >TablePressのショートコード をで囲い、
    TablePressの追加CSSにjs-scrollableを入れたらいかがでしょうか?

    どちらにせよCSSが競合する可能性は高いので崩れてしまうかもしれません。
    その時は新しくCSSを組み直すしかなさそうです。

    こちらを試してみたところ、微妙に 見出し だけが固定されましたw
    ご指摘のとおりCSSの競合が避けられないようなので、ひとまずTablePressは使用しないことにします。
    ご丁寧にご助言をいただき、ありがとうございました。

  9. こんにちは!ぽんひろさん。
    私はDiverというテーマを使っています。

    表はコピペするだけで作れたのですが色がかわりません。

    お手すきな時に教えてください。

  10. はじめまして。アラフィフのブログ初心者です。

    何とかなるだろうと楽観的な考えでブログを始めまし

    たが、ワードプレス、難しくて。ブログに必須の表の挿入は、

    スマホ表示がきれいに出来なくて何度もくじけました。

    ですが、ぽんひろさんのおかげで、今回無事に挿入完了。

    感謝の気持ちでいっぱいです。本当にありがとうございました

    • >Ayaさん

      ありがとうございます!
      そういっていただけると嬉しいです!

  11. ぽんひろさんDiverを使ってると前に質問したものです。
    コピペのミスでした。
    無事色がかわり解決できました。

    • 返信遅れて申し訳ないですが…
      無事変更されたみたいでよかったです!

  12. 素敵な記事ありがとうございます。
    早速実装いたします。

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

    スクロールをぜひ、使用したいのですが、
    アップルップル様に使用の許諾をとる必要があるのでしょうか?
    ホームページを拝見した限り、ライブラリ公開の箇所を見つけることができなかったため念のため確認でした。

    • >あきひろさん

      ありがとうございます。現状は許諾を取る必要はなさそうです。
      ありがたく使わせていただきましょう!

  13. ぽんひろ様

    この記事の表を愛用しています。
    パソコンに詳しくないのでとても助かっています。ありがとうございます。

    今回質問させていただきたいのは、この記事のコードを反映させた後の話です。

    このコードを反映させた後に、ワードプレスについている普通の?テーブルにもスクロールヒントを表示させようと思った時、どのようにすれば良いのかググっても分かりませんでした。(ググる力が足りないだけかも知れませんが。。。)

    お時間のある時に、ワードプレスについている表にスクロールヒントを表示させる方法を教えていただけると幸いです。

    何卒よろしくお願いいたします。

    • 以前ご連絡したカケルと言います。

      色々いじっていたらできるようになりました。

      ご迷惑をおかけしました。

  14. いつも参考にさせていただいております。
    ありがとうございます。

    今回、スクロールヒントのことで質問させていただきたいのですが、
    こちらを実装したところ、一見すると問題ないのですが、
    スクロールさせようとすると、スペースが無いはずの縦にも動いてしまいます。

    COCOONの時は問題なかったのですが、THE THORに変えた途端にこの問題が発生しました。

    色々なパターンを試したのですが、二進も三進もいきません。

    この縦に動く問題を解決するには、どのように修正すればよいでしょうか。
    お忙しいところ恐れ入りますが、ご確認お願いいたします。

    その症状がでる記事のURLを貼っておきます。
    https://umopress.com/retirement-agency

    • >ゆうもさん

      返信遅くなりまして申し訳ございません。

      THE THORはテストしてなかったのですがCSSが干渉してるみたいです。
      こちらのCSSを追記して確認していただいてもよろしいでしょうか?

      .scroll-hint-icon-wrap {
      margin-top: 0 !important;
      }

      • ぽんひろ さん>
        こちらこそ、返信が遅くなり大変申し訳ありません!

        CSS、追記してみましたところ、完全に直りました!
        ホントにホントにありがとうございます。

        お問い合わせしました記事は、事情があって現在非公開にしているのですが、
        別記事で確認させていただきました。
        https://umopress.com/amazon-fire

        これからもガンガン使わせていただきます!
        お忙しい中、本当にありがとうございました。

  15. 初めまして。
    こちらのヘッダー固定テーブルを使わせて頂いています。
    一点お聞きしたいのですが、テーブル内にテキストリンクを挿入するとリンクが反映されません、どうしたら反映されますでしょうか?(テキストリンク部分にリンクの下線は付きますがクリック出来ない状態です)

    試しにHTML一番上の

    の一行を外して更新してみたらテキストリンクがクリック出来ました。

    宜しくお願いいたします。

    • >けんさん

      ありがとうございます。

      リンクが効かないときのHTMLタグ、もしくは該当ページを見せていただくことは可能でしょうか?

  16. ぽんひろさん、いつも素敵なCSSをありがとうございます。ぽんひろさんのおかげで綺麗なブログに仕上がりつつあります!

    こちらの記事なのですが、PCで見ると全く問題ございませんが、スマホ(iPhone のChrome、Safari両方)で見ると表が崩れてしまいます。。

    何か原因思い当たることございますでしょうか?

    お忙しい中、恐れ入りますが、よろしくお願い申し上げます。
    https://www.fermiblog.xyz/entry/try-on-at-home-service

    • >リチャードさん

      返信遅くなりまして申し訳ございません。
      現状もまだ崩れていますか?

      ビジュアルエディタなどで高さの調整をしていればそれが原因かもしれません。

  17. 有益な記事ありがとうございます。
    早速使わせていただいたのですが、スマホで見た時に、見出しを除いて「1行目の高さ」が「1行見出しの高さ」とズレてしまいます。
    もし可能であれば、対応をご教示頂けないでしょうか?

    • >ズーヤンさん

      返信遅くなりまして申し訳ございません。

      ビジュアルエディタなどで高さの調整をしていればそれが原因かもしれません。
      あとは実際に見てみないと原因の特定はちょっと難しそうです。

  18. ぽんひろさん

    はじめまして。
    とても使いやすいカスタマイズの提供ありがとうございます!
    横にスクロールできるカスタマイズはよく見かけていましたが、見出しの固定が出来るのがとにかく嬉しいです^^

    さっそく試してみたところPCからはバッチリ奇麗に表示されていました。

    ですが、スマホからだとスクロールが出来ずに非常に見辛いテーブルになってしまいました。

    見切れてしまっているのではなく、スマホの横幅に合わせるために縦に伸びてしまった形です。

    やったこととしては、テキストエディタで作った後、ビジュアルエディタにて

    ・改行
    ・セルの結合
    ・個別セル内のセンター寄せ

    といったあたりです。
    原因として思い当たるようなことはありますでしょうか?

    どうぞよろしくお願いいたします。

    • ぽんひろさん

      補足させていただきます。
      改めて、こちらに記載されているHTMLコードを何もいじらずに貼り付けたうえで、そのまま公開してみました。

      PCとタブレットでは問題なく奇麗に表示されていますが、スマホからだと

      ・スクロールができない
      ・スクロールヒントが表示されない
      ・見出し部分のセルに色がつかない

      といった感じで、言ってみればカスタマイズが一切反映されていない状況でした。

      少しでも参考になればと思い追記させていただきます。

      • >まりさん

        返信とっても遅くなりまして申し訳ございません。

        カスタマイズが反映されてないということなので、そこの原因を見つける必要があります。

        考えられる理由としては
        ・編集ファイルを間違えている
        ・親テーマ、別テーマを編集してる
        ・キャッシュが残ってる
        などでしょうか。

  19. はじめまして
    使いやすいタグをありがとうございます

    ひとつ質問ですが、文字を白色にしたいのですがどうしたら良いでしょうか?

  20. はじめまして

    スクロールを横にのみして,縦にスクロールさせない方法はありますか?

    縦軸だけは全表示させたいのです.

  21. にはcolspan=””がきくようですが
    にcolspan=””
    を使用すると、スクロールができなくなってしまいます。

    お手数おかけいたしますが、解決方法などを教えていただけると幸いです。

    よろしくお願いいたします。

  22. 上のコメントですが。
    trにはきくが
    thにはきかない

    という内容です。
    申し訳ございませんでした。

  23. ぽんひろさん初めまして!
    有益なカスタマイズ提供ありがとうございます!

    1点ご質問がございます。
    私はブログを2サイト運営しています。
    提供いただいた内容で編集をおこなったところ、1サイトに関しては問題なくスクロールヒントまで表示されましたが、もう1サイトで全く同じように編集してもスクロールまではうまくいきますが、スクロールヒントの表示がされないという事象が発生しております。

    なにか対処法等はありますでしょうか?ご教示いただければ幸いです。

  24. UsefulBlocksPro、有効活用させていただいております。

    別件で本スクロール記事のご相談ですが、現在、以下ページでテーマデフォルトの表を使用しています。
    https://ouchifit365.net/onlinefitness/comparison/

    一部、表の結合などをしたうえで、SEO的に見出しとして判別されるようにしたいですが、本ページ内容で解決されるのでしょうか。

    素人の質問で、見当違いでしたら恐縮ですがご教示いただければ幸甚です。

  25. ぽんひろさん初めまして!
    スクロール表のための
    有益なカスタマイズ情報ありがとうございます!

    一点教えていただきたいことがありコメントさせていただきました。

    私はブログテーマ「JIN」を使っていて
    この記事に書かれているCSSやHTMLを設定し
    スクロール表やスクロールヒントの表示はできたのですが、

    すでに公開している記事で
    デザインボックス内やRinkerで表示した広告の
    「文字がはみ出てしまう」不具合が起きてしまいました。

    設定したCSSやHTMLをすべて消すと、デザインの崩れはなくなります。

    何が影響しているかわかりますでしょうか?

    お手数とは思いますが、回答よろしくお願いします

  26. 初めまして!ぜひこちらの表をお借りしたいと思うのですが、セル内の余白部分を少なくすることは可能でしょうか?

  27. ぽんひろ様
    お世話になります。
    スクロールするテーブルとても簡単に設置できました。
    ありがとうございます。

    ひとつだけ、スクロールする必要がないテーブルもこの表と同じ背景色と文字色などで表示させたいのですが、どうしたらよいでしょうか?

    もし、CSSとHTMLのコードを教えていただければ有難いです。

    背景色は#f0f9ffで作っています。
    宜しくお願いします。

  28. テーブルを作っているのは以下のページです。

    https://taku-cleaning.com/2022/02/25/36/

    アフィンガー5で作っています。

  29. ヘッダー固定テーブルを使わせて頂いております。テーマはジンさんのを使っておりまして、Googleで自分のブログを見ると見出し左に画像が表示されとます。FBとかアメブロでは画像が表示されません。教えてください。
    アメブロのURLです!https://ameblo.jp/yagaoyuan53/entry-12710745231.html

  30. お世話になっております。
    いつも素敵なデザインありがとうございます!
    質問ですが、こちらの表作成してみたところ、PCだと問題ありませんが
    スマホですと各行見出しの上に、それぞれ更に1行挿入された状態となっています。つまり表が崩れています。
    テーマはコクーン、普段はクラシックエディタ、Advanced Editor Toolsプラグインを使用しています。
    プラグインの「マウスのドラッグでのテーブル、行、列のサイズ変更を可能にする」をオフにしてみるなど、いろいろ試してみました変化がありません。
    原因がわかりそうでしたら教えてください。

    https://masoiwazuni.com/gps-osusume/

    • 度々失礼します。ひとまず記事からは外しました!

  31. こちら使わせていただきました!JSいらずで使いやすくて気に入っています。
    iphoneでぐわんぐわん動く挙動は、下記コードをメディアクエリ側に入れるだけで解消されましたので共有いたします★

    .p-sticky-table table {
    max-height: 60vh;
    overscroll-behavior: none;/*横揺れ対応 */
    }

    https://wanfeel.info/?p=520

ページトップへ