Tableの左列固定の横スクロール

tableの左1列を固定して横スクロールをさせたい時にposition: sticky;を使うと思いますが、列を左にスクロールした時に一番左の列の縦線がなくなり右の列が後ろを移動しているのが見えます。これを見えないようにするために空の疑似要素を使って左の列にborderを設定するのですが、ここで問題が生じました。
一番左の列には文字にa hrefでリンクを張っています。疑似要素を使用するとその文字のリンクがクリックできなくなってしまうのです。

リンクをクリックできるようにするために、疑似要素を使わないようにjavascriptを使用してdiv要素を作り、これを棒状にしてborderの代わりとして使用しようと思い、下記コードでtableのtopとleftを取得して、そこからborderのtopとleftとheightを求めて設置しようと思ったのですがtableのtopとleftが正確に取得できず、棒上のdivがずれて表示されたりします。特にwordpress内だとずれます。

javascript
1var top = document.querySelector("#example table").getBoundingClientRect().top;
2var left = document.querySelector("#example table").getBoundingClientRect().left;

列固定のスクロールで、左の列の縦線を表示しつつリンクも有効にしたいのですが、よい解決策はあるでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

テーブルを使うと border-collapse: collapse にしたくなりますが、罠だと思います。
コツは
・border-collapse を separate にする（collapse でご相談の症状になるようです）
・border-spacing を 0 にして collapse のように要素間の隙間を消す
・二列目からの左 border、二行目からの上 border をうまいこと消して線の重複を防止
になります。

HTML
1<!DOCTYPE html sytem "abount:legacy-compat">
2<html lang="ja">
3	<head>
4	<title>TEST</title>
5	<style type="text/css">
6		table{
7			border-collapse: separate;
8			border-spacing: 0px;
9		}
10		th {
11			position: sticky;
12			left: 0;
13			border: 1px solid purple;
14			background-color: plum;
15			min-width: 100px;
16		}
17		td {
18			border: 1px  solid green;
19			border-left: 0px;
20			background-color: lightcyan;
21			min-width: 600px;
22		}
23		tr:not(:first-child)>td, tr:not(:first-child)>th {
24			border-top: 0px;
25		}
26	</style>
27
28	</head>
29	<body>
30		<table>
31			<tr>
32				<th><a href="https://google.co.jp">リンク</a></th>
33				<td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td>
34			</tr>
35			<tr>
36				<th><a href="https://google.co.jp">リンク</a></th>
37				<td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td>
38			</tr>
39		</table>
40	</body>
41</html>