行の高さ全体にわたって表のセルのリンクをクリックできるようにするにはどうすればよいですか?

セル リンクで表の行を垂直に埋める

HTML 表では、ユーザーはセル内の任意の場所をクリックして、関連するリンクをたどることができることを期待しています。リンク。ただし、表のセルが複数の行にまたがっており、他のセルが単一行である場合、単一行のセルが行の垂直方向のスペース全体を占有していない可能性があります。

この問題を解決するには、表のセルのリンクの表示プロパティを設定します。ブロックするのが一般的なアプローチです。ただし、すべてのケースで問題が完全に解決されるわけではありません。

解決策

テーブルのセルのリンクが行の高さ全体を確実に埋めるには、次の CSS ルールを実装します。

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

ブロック要素に任意に大きな負のマージンと均等なパディングを設定すると、リンクはテーブル行の垂直方向のスペース全体に広がります。過剰なパディングがセルの外にこぼれるのを防ぐために、オーバーフロー プロパティは親 TD 要素で非表示に設定されています。

例

<code class="html"><td style="overflow: hidden;">
    <a style="display: block; margin: -10em; padding: 10em;" href="http://www.google.com/">Cell 1</a>
</td></code>

この更新された CSS により、リンクを含む表のセルは、セルの行数に関係なく、常に高さ全体にわたってクリック可能です。

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