スタイル設定のためにテーブル構造を削除する方が簡単であるという @finitelooper の指摘は理解できますが、それを削除するセマンティクスには満足していません。

結局のところ、データは表形式です。

このスニペットは別のアプローチを提供します。つまり、関連する td セルと th セルの疑似要素の前に緑色の境界線を配置します。

これらの曲線は、最初と最後の TD に関連する上下の境界線を設定することによって実現されます。

実際のサイズがどれだけ増加するか (10px) に関しては、コードをいくらか調整する必要がありますが、これは単なるデモンストレーションです:

ここでテーブルを使用するのはおそらく間違ったアプローチであり、状況が少し複雑になります。テーブル データはありますが、実際にはテーブルではないもの (この境界線など) も表示する必要があります。テーブルを使えばできますが、角を丸くするなどは難しいでしょう。

提案が 2 つあります。 1 つは、コードを同じに保ちながら、透明で枠線のある大きな div を作成し、テーブルの上に移動できるようにすることです。そうすれば、クリックできますが、見た目はきれいになります。## を使用することもできます。 #position:absolute を使用して、希望する場所に配置します。