◆ thead 全体の固定を sticky で固定ができる
◆ border が消える問題もなくなってる
◆ col に sticky をつけても複数列を固定できない
◆ Edge は次のバージョンから
最近 (Chrome91?) では table の内部処理が改善されて sticky などで不便だった部分が改善されたと聞いたので試してみました

<!doctype html>

<style>
	.container {
		margin: 30px;
		width: 400px;
		height: 400px;
		background: yellow;
		overflow: auto;
	}
	table {
		font-size: 20px;
		border-spacing: 0;
	}
	thead {
		position: sticky;
		top: 0;
		z-index: 1;
	}
	thead th {
		background: orange;
	}
	thead th:first-child {
		background: rgb(231, 150, 0);
	}
	tr > *:first-child {
		background: gold;
		position: sticky;
		left: 0;
	}
	th, td {
		padding: 10px 20px;
		border: 1px solid darkgoldenrod;
	}
</style>

<div class="container"></div>

<script>
	const row = (tag, body, colnum) => {
		const inner = `<${tag}>${body}</${tag}>`.repeat(colnum)
		return `<tr>${inner}</tr>`
	}
	document.querySelector(".container").innerHTML = `
		<table>
			<thead>
				${row("th", "H", 32).repeat(2)}
			</thead>
			<tbody>
				${row("td", "B", 32).repeat(128)}
			</tbody>
		</table>
	`
</script>

thead 全体を sticky にできるので 複数行のヘッダでも問題なく上部に固定できてます
また以前はおかしかった border についても特に問題なく表示できてます
各行の左側を固定する sticky も動きます
ただ colgroup を定義して col に sticky を指定しても複数列を sticky にすることはできませんでした
これを実現するなら 実際に固定するのは端の 1 列にして 内部で左右に分けて複数列あるように見せて対処することになりそうです

追記

記事を再確認していたら ヘッダが固定されていないし ボーダーもおかしい状態になってました
原因がわからずに苦戦したのですが ブラウザ側の問題でした
動かなかったときに使っていたのは Edge です
どちらも最新で 91 なのですが 現時点で最新の Edge だとこの修正が適用されていないようです
次の 92 で試すと動いてたので次のリリースに入りそうです
メジャーバージョンが同じでも Chrome と Edge で機能のリリース時期が違うと不便なところがありますね