<div class="table_box">
<table>
<tr>
<th class="sticky_row">列固定</th>
<td>テキスト</td>
<th class="sticky_from">途中固定</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="sticky_row">列固定</th>
<td>テキスト</td>
<th class="sticky_from">途中固定</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="sticky_row">列固定</th>
<td>テキスト</td>
<th class="sticky_from">途中固定</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>
</div>
.table_box{
width:400px;
background: #fff;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
table {
width: 700px; /* th,tdの幅 × th,tdの数 */
border-collapse: collapse;
border-spacing: 0;
}
th, td {
width: 100px; /* th,tdの幅を指定する */
vertical-align: middle;
padding: 20px;
border: 1px solid #000;
font-size:14px;
}
td {
background: #fff;
}
/* 始めの列固定 */
.sticky_row {
position: sticky;
background: #000;
left: 0;
border-left: none;
border-right: none;
}
/* 途中からの列固定 */
.sticky_from{
position: sticky;
color: #fff;
background: #000;
left: 100px;
border-left: none;
border-right: none;
}
/* 固定セルの線 */
.sticky_row::before,
.sticky_from::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #ccc;
z-index: -1;
}
.sticky_from::before{
left: -1px;
background: #666;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.