7

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.

John Anderson
  • 1,075
  • 5
  • 21
  • 25
  • try using div instead of span. span don't have width and height attributes. set div width to 100% so that it will fill whatever width you set to td. – rechie Jun 04 '12 at 03:35

5 Answers5

17

Try it:

a {
    display: block;
    height: 100%;        
    width: 100%;
}
Tooraj Jam
  • 1,592
  • 14
  • 27
3

Make your <a> element a block element (it's inline by default):

.width_is_100px a {
    display:block;
}
Tieson T.
  • 20,774
  • 6
  • 77
  • 92
1

None of these answers work properly to fill the width and height when the text wraps.

The only answer I found that produces a proper result filling the height and width of the cell right to the edges is this one:

td {
    overflow: hidden;
}

td > a {
    display: block;
    margin: -10em;
    padding: 10em;
}
SharpC
  • 6,974
  • 4
  • 45
  • 40
  • 1
    It's 2019 and running Firefox Night (67.0a1), this works like a charm! Thanks so much for this and no hackish position-absolute-way as back in the days of IE9 & Co. – Yoda Feb 17 '19 at 17:12
  • The only thing that worked for me in Chrome to cover both width and height edge-to-edge. – hyphen Jan 16 '23 at 11:38
0
<table>
    <tr>
        <td class="width_is_100px">
            <a href="http://www.doesnotwork.com"><div style="width:100%;">Some Text</div></a>
        </td>
    </tr>
</table>
rechie
  • 2,139
  • 5
  • 25
  • 38
0

this is probably too late but, this worked for me in tables with different content height.

html

<table class="example">
    <tr>
        <td><a href="">small content</a></td>
        <td><a href="">multiline<br>content</a></td>
    <tr>
</table>

css

table{ 
    padding:10px;  /*for example*/
}
table.example td{
    overflow:hidden;
    padding:0px; /*you can need !important*/
}
table.example a{
    display: block;
    height: 100%;
    width: 100%;
    padding: 10px 10px 500px 10px; /*table default padding except on bottom 500px for example*/
    margin-bottom: -490px; /*same as bottom padding - table padding*/
}
Rodrigo Lozano
  • 21
  • 5