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行までの各表のソースコードをコピペするだけで良いように載せておく