WordPress_Fix first column / row table

Update：2020/4/17

（ ウェブブラウザ「Google Chrome」使用者向け_１列目・１行目を固定してそれ以外の列・行をスクロールする表のつくり方）


Introduce the process of making the following table
（以下の表をつくる工程を紹介する）

1.　Click “Appearance→Theme editor”
　（「外観→テーマエディター」 をクリック ）

2.　Click “style.css”
　（ 「style.css」 をクリック ）

3.　Copy the following and paste it at the bottom of style.css and click “Update File”
　（ 以下をコピーしてstyle.cssの最下部に貼り付けて「ファイルを更新」クリック ）

/**********
１列目・１行目を固定してそれ以外の列・行をスクロールする表のつくり方_step1_style.css追記
**********/
.p-sticky-table{
white-space: nowrap;
line-height:1.3;/*文字と文字の間隔*/
}
.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: 150px;/*1列目の幅*/
}
.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;
}

4.　Click “Post → Add new”
　（ 「投稿→新規追加」をクリック ）

5.　Click “More tools and settings” at the top right of the screen
　（ 画面右上の「ツールと設定をさらに表示」をクリック ）

6.　Click “Code Editor”
　（「コードエディター」をクリック）
※Confirmed that scrolling does not occur when editing with the visual editor
　（ビジュアルエディターで編集するとスクロールしないことは確認済み）

7.　Copy and paste below
　（以下をコピーして貼り付け）

Finished
（完了）

<div class="p-sticky-table">
<table class="js-scrollable">
<thead>
<tr>
<th>1列・1行目</th>
<th>2列・1行目</th>
<th>3列・1行目</th>
<th>4列・1行目</th>
<th>5列・1行目</th>
<th>6列・1行目</th>
<th>7列・1行目</th>
<th>8列・1行目</th>
<th>9列・1行目</th>
</tr>
</thead>
<tbody>
<tr>
<th>1列・2行目</th>
<td>2列・2行目</td>
<td>3列・2行目</td>
<td>4列・2行目</td>
<td>5列・2行目</td>
<td>6列・2行目</td>
<td>7列・2行目</td>
<td>8列・2行目</td>
<td>9列・2行目</td>
</tr>
<tr>
<th>1列・3行目</th>
<td>2列・3行目</td>
<td>3列・3行目</td>
<td>4列・3行目</td>
<td>5列・3行目</td>
<td>6列・3行目</td>
<td>7列・3行目</td>
<td>8列・3行目</td>
<td>9列・3行目</td>
</tr>
<tr>
<th>1列・4行目</th>
<td>2列・4行目</td>
<td>3列・4行目</td>
<td>4列・4行目</td>
<td>5列・4行目</td>
<td>6列・4行目</td>
<td>7列・4行目</td>
<td>8列・4行目</td>
<td>9列・4行目</td>
</tr>
<tr>
<th>1列・5行目</th>
<td>2列・5行目</td>
<td>3列・5行目</td>
<td>4列・5行目</td>
<td>5列・5行目</td>
<td>6列・5行目</td>
<td>7列・5行目</td>
<td>8列・5行目</td>
<td>9列・5行目</td>
</tr>
<tr>
<th>1列・6行目</th>
<td>2列・6行目</td>
<td>3列・6行目</td>
<td>4列・6行目</td>
<td>5列・6行目</td>
<td>6列・6行目</td>
<td>7列・6行目</td>
<td>8列・6行目</td>
<td>9列・6行目</td>
</tr>
<tr>
<th>1列・7行目</th>
<td>2列・7行目</td>
<td>3列・7行目</td>
<td>4列・7行目</td>
<td>5列・7行目</td>
<td>6列・7行目</td>
<td>7列・7行目</td>
<td>8列・7行目</td>
<td>9列・7行目</td>
</tr>
<tr>
<th>1列・8行目</th>
<td>2列・8行目</td>
<td>3列・8行目</td>
<td>4列・8行目</td>
<td>5列・8行目</td>
<td>6列・8行目</td>
<td>7列・8行目</td>
<td>8列・8行目</td>
<td>9列・8行目</td>
</tr>
<tr>
<th>1列・9行目</th>
<td>2列・9行目</td>
<td>3列・9行目</td>
<td>4列・9行目</td>
<td>5列・9行目</td>
<td>6列・9行目</td>
<td>7列・9行目</td>
<td>8列・9行目</td>
<td>9列・9行目</td>
</tr>
<tr>
<th>1列・10行目</th>
<td>2列・10行目</td>
<td>3列・10行目</td>
<td>4列・10行目</td>
<td>5列・10行目</td>
<td>6列・10行目</td>
<td>7列・10行目</td>
<td>8列・10行目</td>
<td>9列・10行目</td>
</tr>
<tr>
<th>1列・11行目</th>
<td>2列・11行目</td>
<td>3列・11行目</td>
<td>4列・11行目</td>
<td>5列・11行目</td>
<td>6列・11行目</td>
<td>7列・11行目</td>
<td>8列・11行目</td>
<td>9列・11行目</td>
</tr>
<tr>
<th>1列・12行目</th>
<td>2列・12行目</td>
<td>3列・12行目</td>
<td>4列・12行目</td>
<td>5列・12行目</td>
<td>6列・12行目</td>
<td>7列・12行目</td>
<td>8列・12行目</td>
<td>9列・12行目</td>
</tr>
<tr>
<th>1列・13行目</th>
<td>2列・13行目</td>
<td>3列・13行目</td>
<td>4列・13行目</td>
<td>5列・13行目</td>
<td>6列・13行目</td>
<td>7列・13行目</td>
<td>8列・13行目</td>
<td>9列・13行目</td>
</tr>
</tbody>
</table>
</div>

次のページに３列・３行～６列・６行までの各表のソースコードをコピペするだけで良いように載せておく