Question

I have a table cell with an anchor tag and I want the width (and height) of the anchor tag to fill the width of the containing table cell. Intuition doesn’t seem to work on this. Please help.

HTML:

<table>
    <tr>
        <td class="width_is_100px">
            <a href="http://www.doesnotwork.com"><span class="make_width_100px">Some Text</span></a>
        </td>
    </tr>
</table>

CSS: (doesn’t work)

.make_width_100px {
    width:100px !important;
}

The anchor tag is only as wide as the text “Some Text”. I want the user to be able to click anywhere inside the table cell and trigger the link. No javascript please.

Answer 1

Try it:

a {
    display: block;
    height: 100%;        
    width: 100%;
}