表のセルのリンクを拡張して行の高さを埋めるにはどうすればよいですか?

表のセル リンクを行の高さいっぱいに拡張する

表形式のデータ ビジュアライゼーションでは、セル リンクがテーブルの垂直方向のスペース全体をカバーできないことがよくあります。特にセルの高さが異なる場合。部分的に覆われたセルをクリックしても目的のアクションがトリガーされない可能性があるため、これによりユーザーの操作が妨げられる可能性があります。

この問題を修正するには、次の手法を使用できます:

マージンを設定し、ドライブ リンク拡張へのパディング

1. 親テーブルのセルにオーバーフロー: 非表示を適用します。
2. display: block を使用してリンクをブロック要素に変換します。
3. ブロック要素に任意の大きな負のマージン (例: -10em) と同量のパディング (例: 10em) を設定します。

サンプル コードの実装

<code class="css">td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}</code>

この調整により、表のセルの境界を越えてリンクが拡張され、行の高さ全体が効果的にカバーされます。ユーザーは、セルに複数行のコンテンツがあるかどうかに関係なく、セル内の任意の場所をクリックしてリンクをアクティブにできるようになりました。

ここで更新された JSFiddle デモを参照してください: http://jsfiddle.net/RXHuE/213/

以上が表のセルのリンクを拡張して行の高さを埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。