How to Make Table Cell Links Clickable Across the Entire Row Height?

Filling Table Row Vertically with Cell Links

In HTML tables, users expect to be able to click anywhere within a cell to follow the associated link. However, when table cells span multiple lines and others are single-lined, the single-lined cells may not occupy the entire vertical space of the row.

To remedy this issue, setting the display property of table cell links to block is a common approach. However, this may not fully resolve the problem in all cases.

Solution

To ensure that table cell links fill the entire row height, implement the following CSS rule:

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

By setting an arbitrarily large negative margin and equal padding on the block element, the link will span the entire vertical space of the table row. The overflow property is set to hidden on the parent td element to prevent the excessive padding from spilling outside the cell.

Example

<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>

This updated CSS will ensure that table cells containing links are always clickable across their entire height, regardless of the number of lines they span.

The above is the detailed content of How to Make Table Cell Links Clickable Across the Entire Row Height?. For more information, please follow other related articles on the PHP Chinese website!