WordPress_Fix first column / row table

Update:2020/4/17

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


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

1列・1行目 2列・1行目 3列・1行目 4列・1行目 5列・1行目 6列・1行目 7列・1行目 8列・1行目 9列・1行目
1列・2行目 2列・2行目 3列・2行目 4列・2行目 5列・2行目 6列・2行目 7列・2行目 8列・2行目 9列・2行目
1列・3行目 2列・3行目 3列・3行目 4列・3行目 5列・3行目 6列・3行目 7列・3行目 8列・3行目 9列・3行目
1列・4行目 2列・4行目 3列・4行目 4列・4行目 5列・4行目 6列・4行目 7列・4行目 8列・4行目 9列・4行目
1列・5行目 2列・5行目 3列・5行目 4列・5行目 5列・5行目 6列・5行目 7列・5行目 8列・5行目 9列・5行目
1列・6行目 2列・6行目 3列・6行目 4列・6行目 5列・6行目 6列・6行目 7列・6行目 8列・6行目 9列・6行目
1列・7行目 2列・7行目 3列・7行目 4列・7行目 5列・7行目 6列・7行目 7列・7行目 8列・7行目 9列・7行目
1列・8行目 2列・8行目 3列・8行目 4列・8行目 5列・8行目 6列・8行目 7列・8行目 8列・8行目 9列・8行目
1列・9行目 2列・9行目 3列・9行目 4列・9行目 5列・9行目 6列・9行目 7列・9行目 8列・9行目 9列・9行目
1列・10行目 2列・10行目 3列・10行目 4列・10行目 5列・10行目 6列・10行目 7列・10行目 8列・10行目 9列・10行目
1列・11行目 2列・11行目 3列・11行目 4列・11行目 5列・11行目 6列・11行目 7列・11行目 8列・11行目 9列・11行目
1列・12行目 2列・12行目 3列・12行目 4列・12行目 5列・12行目 6列・12行目 7列・12行目 8列・12行目 9列・12行目
1列・13行目 2列・13行目 3列・13行目 4列・13行目 5列・13行目 6列・13行目 7列・13行目 8列・13行目 9列・13行目

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の最下部に貼り付けて「ファイルを更新」クリック )

/**********
1列目・1行目を固定してそれ以外の列・行をスクロールする表のつくり方_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>

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です