<div class="table_box">
<table>
  <tr>
	<th class="sticky">行固定</th>
	<th class="sticky">行固定</th>
	<th class="sticky">行固定</th>
  </tr>
  <tr>
	<td>テキスト</td>
	<td>テキスト</td>
	<td>テキスト</td>
  </tr>
  <tr>
	<td>テキスト</td>
	<td>テキスト</td>
	<td>テキスト</td>
  </tr>
  <tr>
	<td>テキスト</td>
	<td>テキスト</td>
	<td>テキスト</td>
  </tr>
  <tr>
	<td>テキスト</td>
	<td>テキスト</td>
	<td>テキスト</td>
  </tr>
  <tr>
	<td>テキスト</td>
	<td>テキスト</td>
	<td>テキスト</td>
  </tr>
  <tr>
	<td>テキスト</td>
	<td>テキスト</td>
	<td>テキスト</td>
  </tr>
  <tr>
	<td>テキスト</td>
	<td>テキスト</td>
	<td>テキスト</td>
  </tr>
  <tr>
	<td>テキスト</td>
	<td>テキスト</td>
	<td>テキスト</td>
  </tr>
  <tr>
	<td>テキスト</td>
	<td>テキスト</td>
	<td>テキスト</td>
  </tr>
</table>
</div>
.table_box{
	overflow-y: auto;
	height: 200px;
  width:400px;
  -webkit-overflow-scrolling: touch;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th, td {
  vertical-align: middle;
  padding: 20px;
  border: 1px solid #000;
  color: #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
th {
  background: #000;
}
td {
  background: #fff;
}
.sticky {
  position: sticky;
  top: 0;
  left: 0;
  border-top: none;
}
.sticky::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #ccc;
  z-index: -1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.