WordPress

【ワードプレス】ブログの表（テーブル）の横スライド（横スクロール）の設定方法（タイトル行・列固定）

【ワードプレス】ブログの表（テーブル）の横スライド（横スクロール）の設定方法（タイトル行・列固定）

ブログでよく見る横スライド（横スクロール）できる表の作成方法について簡単にまとめました。

とても簡単ですのでぜひ試してみて下さい。

STEP1　（事前準備）追加CSSにコード追加

まず「外観→テーマエディター→style.css(子テーマ)」もしくは「外観→カスタマイズ→追加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;
}

下図のような感じでコピぺします。

 

ちなみに、このCSSは、パソコンで見た時の画面の高さが80%、スマホで見た時の画面の高さの60%を超えたテーブルが固定スクロールになる設定です。

※「max-height: 80vh;」の箇所の数字を修正することで調整できます。

STEP2　投稿記事のテキストエディタにHTMLをコピペ

①上部見出しがある表を作成

下図のように上部に見出しがある表を作りたい場合について説明します。

見出し(上)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列
下記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>
行・列の追加・削除したい場合

行を増やす：< 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>

行・列を追加・削除したい場合

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

各セルの横幅は文字数に自動調整しているため、必要に応じて改行して幅を調整して下さい。

おすすめの記事