cssでスマホ表示のときにtableのth部分を固定してtd部分をスクロールさせる

<table class="side-table">
<tbody>
<tr>
	<th>OS</th>
	<td>Android 8.0 Oreo/EMUI 8.0</td>
	<td>Android 7.0 Nougat</td>
</tr>
<tr>
	<th>CPU</th>
	<td>HUAWEI Kirin 659 オクタコアCPU （4 × 2.36GHz + 4 × 1.7GHz）</td>
	<td>MediaTek MT6750T (オクタコアCPU) </td>
</tr>
<tr>
	<th>RAM</th>
	<td>3GB</td>
	<td>4GB</td>
</tr>
<tr>
	<th>ストレージ</th>
	<td>32GB</td>
	<td>32GB</td>
</tr>
<tr>
	<th>ディスプレイ</th>
	<td>5.65インチ 2160×1080 (FHD+)</td>
	<td>5.7インチ 2160×1080 (FHD+)</td>
</tr>
</tbody>
</table>

.side-table1 tbody th{
	display:block;
	width:100%;
	background:#f0f0f0;
}
.side-table1 tbody td{
	display:block;
	width:100%;
}

.side-table2 tr{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	width:100%;
}
.side-table2 thead th:nth-of-type(1){
	display:none;
}
.side-table2 thead th, .side-table2 td{
	flex:1 1 auto;
	width:50%;
	text-align:center;
}
.side-table2 tbody th{
	width:100%;
	background:#f0f0f0;
}
.side-table2 th, .side-table2 td{
	border:0;
}
.side-table2 tbody td{
	padding:.5em;
}
.side-table2 th, .side-table2 td{
	font-size:90%;
}

@media screen and (max-width: 640px){
.side-scroll{
	overflow-x:auto;
	margin:1.5rem auto;
	word-break:break-all;
	width:100%;
	padding-bottom:8px;
}
.side-table3{
	text-align:center;
	font-size:90%;
}
.side-table3 td, .side-table3 th{
	border:0;
}
.side-table3 tr{
	display:flex;
}
.side-table3 thead th{
	width:calc(50vw - 1.5rem);
	max-width:200px;
	padding:.5rem;
}
.side-table3 tbody th{
	width:100%;
	position:absolute;
	left:0;
	text-align:center;
	line-height:1.5rem;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	background:#eee;
	padding:0 0 0 0;
}
.side-table3 tbody td{
	width:calc(50vw - 1.5rem);
	padding:1.8rem .5rem .5rem .5rem;
}
.side-table3 thead th:nth-of-type(1){
	display:none;
}
}