<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.