Home/ Questions/Q 4530998
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T13:51:38+00:00

I am trying to make an entire table cell clickable. The general advice I

  • 0

I am trying to make an entire table cell clickable. The general advice I have found is to use display: block; but all of the examples I have seen have only a single line cells. I have cells with rowspans that seem to make life harder.

Consider this brightly coloured example:

<html>
    <head>
        <style type="text/css">
            td { border: 1px; background-color: blue; }
            td a { display: block; background-color: yellow; border: 1px solid red; }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td rowspan=2><a href="#">Left</a></td>
                <td><a href="#">Upper Right</a></td>
            </tr>
            <tr>
                <td><a href="#">Lower Right</a></td>
            </tr>
        </table>
    </body>
</html>

The anchor tag’s block (yellow) is all clickable. But the left hand side has (blue) margins above and below it that are not clickable. I guess I need something to increase the padding to fill the full td cell on the left (without changing the size of the cells on the right), but I haven’t been able to find the right incantation to do this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    td a {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: yellow;
    border: 1px solid red;
}

    Demo

    example

    • 0