HTML

<div class="scrollbox">
	<div class="innerbox">
		<table class="tablefix">
			<thead>
				<tr><th></th></tr>
			</thead>
			<tbody>
				<tr><td></td></tr>
			</tbody>
		</table>
	</div>
</div>

CSS

.scrollbox {
	position: relative;
	width: 100%;
	height: 30em;
	overflow: scroll;
	border: 1px solid gray;
}

.innerbox {
	padding: 1em;
	display: table-cell;
}

.tablefix {
	border-collapse: separate;
	border-spacing: 0px;
	border-bottom: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
}

.tablefix thead th {
	position: relative;
	white-space: nowrap;
	background-color: #e3e3e3;
}

.tablefix th,
.tablefix td {
	border-top: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
	padding: 0.5em;
}

JavaScript（要 jQuery）

$(function(){

	$('.scrollbox').scroll(function(e){
		let th_top = $(this).find('.tablefix').position().top;
		let filter;

		if (th_top>=0) {
			th_top = 0;
			filter = 'unset';
		} else {
			th_top = -th_top-1;
			filter = 'drop-shadow(0px 4px 0px #00000040) drop-shadow(0px 2px 0px #00000040)';
		}

		$(this).find('.tablefix thead th').css({
			top: th_top,
			filter: filter
		});
	});

});

解説

ロジック

scrollbox のスクロールイベントで、テーブルヘッダがスクロールアウトしていた場合、位置を計算して更新しています。位置計算でマイナス１しているのは、枠線分の背景が透けて見えるのを防いでいるためです。

また、ヘッダが固定状態になったときに下側に影を落としています。box-shadow ではなく filter を使っているのは、影が左右へはみ出すのを防ぐためです（同じ理由でぼかしを入れられない）。スタイルの変更はお好みに合わせて変更してください。

Firefox のバグに対応

テーブルを border-collapse: collapse; にして th に position: sticky; を設定すると、firefox 系で枠線（の右側と下側）が消えるバグが発生します。このためテーブルを border-collapse: separate; border-spacing: 0px; にしています。この場合、枠線の太さを 2px にする場合と 1px にする場合とで工夫が必要になります。

枠線の太さを 2px にする場合

table, th, td の３つに 1px の枠線を付けます。

.tablefix {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #dddddd;
}

.tablefix th,
.tablefix td {
	border: 1px solid #dddddd;
}

枠線の太さを 1px にする場合

table の右と下に 1px の枠線、th, td の左と上に 1px の枠線を付けます（サンプルの方法）。

innerbox について

scrollbox 内でスクロールさせたとき、padding（もくしはテーブルの margin）がうまく適用されない点について修正しています。これ（display: table-cell;）が無いと、右側へスクロールさせても余白がありません。また、Firefox と Chrome で下側へのスクロールで違いがあります。

なお、スクロールボックス内に入れない場合や、余白が必要ない場合は必要ありません。

<div class="scrollbox">
	<div class="innerbox">
		<table class="tablefix">
			<thead>
				<tr><th></th></tr>
			</thead>
			<tbody>
				<tr><td></td></tr>
			</tbody>
		</table>
	</div>
</div>

.scrollbox {
	position: relative;
	width: 100%;
	height: 30em;
	overflow: scroll;
	border: 1px solid gray;
}

.innerbox {
	padding: 1em;
	display: table-cell;
}

.tablefix {
	border-collapse: separate;
	border-spacing: 0px;
	border: 1px solid #dddddd;
}

.tablefix thead th {
	position: sticky;
	top: 0;
	white-space: nowrap;
	background-color: #e3e3e3;
}

.tablefix th,
.tablefix td {
	border: 1px solid #dddddd;
	padding: 0.5em;
}

.tablefix {
	border-bottom: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
}

.tablefix th,
.tablefix td {
	border-top: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
}