<style>
table {
width: 100%;
}
th, td {
height: 300px;
vertical-align: middle;
padding: 0 15px;
border: 1px solid #ccc;
}
.fixed01 {
position: sticky;
top: 0;
color: #FFF;
background: #333;
&:before{
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid #ccc;
}
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<th class="fixed01">見出し</th>
<th class="fixed01">見出し</th>
<th class="fixed01">見出し</th>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>
</div>
「position: sticky;」は「指定された場所までいくと固定」される仕様
なるほど。。
