HTML: 行スパンが rows_html/css_WEB-ITnose を横切るときのホバー効果

rowspan はテーブルのごく一般的な要件であり、tr のホバー効果はさらに一般的です。しかし、行スパンと行ホバー効果の両方がある場合、次のようなことがよくあります:

これはまったく耐えられません。 ！

数日前にこの問題に遭遇したとき、当初はそれを解決するために JS コードを書くつもりでしたが、後で比較的単純なアイデアを思いつきましたが、HTML 自体を書くのはより複雑でした。制御可能である必要があります (HTML がどのように見えるかを決定するのはあなた次第です)。これはほとんどの状況には適していません。

後になって、このような明白な問題がこれまでに発生しなかったなんてありえないと感じました。それでGoogleで調べてみたところ、案の定、それは本当だった。

解決策は非常に簡単です。コードをリストする必要はなく、口述するだけです。

テーブルでは複数の tbody がサポートされています。これは行間のホバー効果を実現するための鍵となるため、解決策は、rowspan の複数の関連する行を tbody でラップし、tbody:hover 効果を設定することです。

前の tr:hover 効果を無視して、同じホバー効果を対応する tbody に追加することもできます。

見た目的には IE7 と互換性があります

なので、意識的に thead/tbody を追加する習慣を身につけると良いでしょう。 -了-