`col`、`colgroup`、および CSS `:hover` を使用して、単一のテーブル セル以上を強調表示することはできますか?

col、colgroups、CSS の "hover" 疑似クラスは単一のセル以外にも使用できますか?

テーブルの行を強調表示し、マウスホバー時の列では、「:hover」のような CSS 疑似クラスを使用できます。しかし、単一のセルだけでなく、ヘッダーを含む行または列全体を強調表示したい場合はどうすればよいでしょうか?

純粋な CSS ソリューションでは、::before および ::after 擬似要素を使用してこれを実現できます。これらの要素は、選択した要素の前後にコンテンツをそれぞれ追加します。方法は次のとおりです:

1. 強調表示要素の作成:

   • 行の強調表示には ::before を追加し、列の強調表示には ::after を追加します。関連要素 (例: tr、td、
   • これらの要素をどこにでも拡張できるようにするには、絶対配置を使用します。
   • 左/上 (::前) または左/下 (:) に負の値を使用して、要素の境界の外側に配置します。 :after).
   • 全体をカバーするために、より大きな幅/高さを設定します。 row/column.

2. ハイライト オーバーフローを非表示:

   • オーバーフローを設定して、ハイライト要素がテーブルからオーバーフローしないようにします。
   • これにより、テーブル領域がきれいに保たれ、ハイライトが個々の範囲を超えて広がることが保証されます。セル。

3. 行/列セレクターの追加:

   • 現在の行または列のみを強調表示するには、次を使用します。 :hover th (ヘッダー) および :hover .row / .col (クラスベース) の :before 要素と ::after 要素

以下の CSS コードは次の原則を実装しています。

HTML はほとんど変更されていませんが、次のクラス名が含まれています。行と列:

このソリューションは最新のブラウザーで動作し、ホバー表示を拡張します。行と列全体にエレガントなハイライト効果を与えます。

以上が`col`、`colgroup`、および CSS `:hover` を使用して、単一のテーブル セル以上を強調表示することはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。