表のセルのリンクを行の高さ全体に広げるにはどうすればよいですか?

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

リンクを含むセルを含む表を作成する場合、ユーザーが任意の場所をクリックできるようにすることが望ましいセル内でリンクのアクションをトリガーします。ただし、セルが複数の行にまたがり、同じ行内の他のセルの行数が少ない場合、短いセルが行の垂直方向のスペース全体を埋められない可能性があります。

この問題に対処するための一般的なアプローチは、リンクされたセルを設定することです。セル内の要素は、display: block プロパティを使用してブロック要素として動作します。これにより、リンクをセルの幅と高さ全体に拡張できるようになります。ただし、一部のセルに複数の行がある場合、単行のセルが視覚的に短く見えることがあります。

この問題の解決策は、ブロック要素に負のマージンと均等なパディングを適用することです。負のマージンにより、ブロック要素がセルの境界を超えて拡張されますが、パディングによりテキストがセルのコンテンツと重なることがなくなります。さらに、親テーブル セルのオーバーフロー プロパティを非表示に設定すると、セルの境界外のコンテンツのオーバーフローが防止されます。

次の更新された CSS コードを考慮してください。

td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

これらの調整により、表のセル内のリンクは、行の高さ全体を満たすように引き伸ばされ、コンテンツの長さに関係なく、すべてのセルの外観が一貫したものになります。

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