◆ table が改善されたしと 表レイアウトに普通に table タグを使ってみた
◆ 行全体を a タグを使ったリンクにしたいときに困る
◆ セル内の a タグを行全体のサイズで表示して対処できなくはないけどいまいち

table は扱いづらいので table タグを使わずに table レイアウトにすることが多いです
最近は table が改善されて sticky も使いやすくなったので table タグにして作ってみました

すると意外なところで困ることがありました
行リンクです
行全体をリンクにします

こういうことをしたい場合は 基本 tr の click イベントで JavaScript を使ってページを移動します
こういうの

<!DOCTYPE html>

<table id="table">
<tbody>
<tr data-href="https://www.google.com/">
<td>Google</td>
<td>12</td>
<td>32</td>
</tr>
<tr data-href="https://github.com/">
<td>Github</td>
<td>21</td>
<td>43</td>
</tr>
<tr data-href="https://developer.mozilla.org/ja/docs/Web">
<td>MDN</td>
<td>92</td>
<td>33</td>
</tr>
</tbody>
</table>

<style>
table {
border-collapse: collapse;
}
td {
min-width: 200px;
padding: 3px 8px;
border: 1px solid #ccc;
}
tr:hover {
background: aliceblue;
}
</style>

<script>
table.onclick = (event) => {
const tr = event.target.closest("[data-href]")
if (tr) location = tr.dataset.href
}
</script>

動きはするので 最初は問題視してませんでした
ですが タブで開きたいなって思ったときに リンクじゃないので右クリックして「新しいタブで開く」を選べません
あと左下のリンク先表示で URL が見えないのも地味に不便です

table タグを使わないなら行全体の div を a タグで囲めばいいだけです
ですが table になると tr タグを a タグで囲んだり tr タグの中に a タグを入れるのは不正な構造となります
ブラウザが自動補完して table タグの外側に a タグが配置されたりします

結局 td の中に a タグを入れて position を使って行全体に配置するという荒業で解決しましたが ベストと言えない方法だと思います
こういう制限があるので やっぱり table タグじゃなくて div だけで作ればいい気がしました

position による解決策はこういうのです

<!DOCTYPE html>

<table id="table">
<tbody>
<tr>
<td class="rowlink"><a href="https://www.google.com/"></a></td>
<td>Google</td>
<td>12</td>
<td>32</td>
</tr></a>
<tr>
<td class="rowlink"><a href="https://github.com/"></a></td>
<td>Github</td>
<td>21</td>
<td>43</td>
</tr>
<tr>
<td class="rowlink"><a href="https://developer.mozilla.org/ja/docs/Web"></a></td>
<td>MDN</td>
<td>92</td>
<td>33</td>
</tr>
</tbody>
</table>

<style>
table {
border-collapse: collapse;
}
td {
min-width: 200px;
padding: 3px 8px;
border: 1px solid #ccc;
}
tr:hover {
background: aliceblue;
}
tr {
position: relative;
}
.rowlink {
width: 0;
min-width: 0;
border: 0;
padding: 0;
}
.rowlink a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>