[CSS] position:stickyで固定表示したい時

    <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;」は「指定された場所までいくと固定」される仕様

なるほど。。