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

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

見出し固定スクロールヒント付きテーブルの作り方
更新情報: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を入れたのですが、反応がありませんでした。

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

  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

ページトップへ