12

I basically have the following:

<table>
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="..."></a>
      </td>
    </tr>
  </tbody>
</table>

Assume that the table cell has some width and height to it, as created by additional table cell and table header elements.

I need that anchor element to expand to the same width and height of the table cell so that you can click anywhere within the cell to get to the link. How does one do this so that it's cross-browser compatible?

Clarification Setting the table cell to have a fixed width or height is not a valid option.

Lester Peabody
  • 1,868
  • 3
  • 20
  • 42

4 Answers4

11

set the style of the anchor to:

 style="display: block; height: 100%; width:100%;"
Yaron U.
  • 7,681
  • 3
  • 31
  • 45
  • 6
    This will only work if the width and height is set on the table cell element. It is not, and will change size dynamically depending on the content generated. – Lester Peabody Jan 20 '12 at 22:38
  • @paislee setting either height or width to a fixed value is not a valid option on the table cell... i will clarify this in the question – Lester Peabody Jan 20 '12 at 22:39
  • @LesterPeabody that was just to demonstrate that the anchor is expanding to the full height of the TD ~ whatever that happens to be.. – calebds Jan 20 '12 at 22:40
  • @paislee that's not really true, it only expands because you've actually set the height on the cell... if you don't set the height of the cell, and that cell takes on a particular height based on the tallest cell in the row, the anchor will in fact not expand to the height of the cell. – Lester Peabody Jan 20 '12 at 22:43
  • @paislee this is perhaps a better starting point http://jsfiddle.net/zGWTk/2/ ... i forget how awesome jsFiddle is – Lester Peabody Jan 20 '12 at 22:49
  • 1
    I'm not sure if this can be done using css only, if your are ok with using jQuery as well you can use something like the following: http://jsfiddle.net/zGWTk/3/ – Yaron U. Jan 20 '12 at 22:55
  • @YaronUliel Great suggestion. Maybe add that to your answer? – calebds Jan 20 '12 at 22:59
  • Looks like there is no flexible answer, see the answers to http://stackoverflow.com/questions/3966027/make-link-in-table-cell-fill-the-entire-row-height – Jukka K. Korpela Jan 20 '12 at 23:00
4

Inside the link place an empty span. You can either give it a class and add css or give it an inline style.

I prefer to add a class like this:

<table>
<thead>
<tr>
  <th>Header</th>
</tr>
</thead>
<tbody>
<tr>
  <td>
      <a id="anchor" href="#"><span class="linkfill"></span>Link</a>
  </td>
 </tr>
</tbody>


<style>
.linkfill {
position: absolute;
width: 100%;
height: 100%;
}
</style>

This will flex with your table. working fiddle: http://jsfiddle.net/zGWTk/6/

Nicole McCoy
  • 358
  • 1
  • 3
  • 12
1

Following hack works [Tested on Chrome / Firefox / Safari] Have the same padding for td and anchor elements. And for anchor also have margin which is equal to -ve of padding value.

HTML

<table>
    <tr>
        <td><a>Hello</a></td>
    </tr>
</table>

CSS:

td {                          
    background-color: yellow;                                                                              
    padding: 10px;                                                                                                            
}  
a {
    cursor:pointer;
    display:block;
    padding: 10px;
    margin: -10px;
}

Working Fiddle :http://jsfiddle.net/JasYz/

vaichidrewar
  • 9,251
  • 18
  • 72
  • 86
0

Another way to achieve this is to make use of pseudo elements (::before or ::after) on the anchor.

  1. Starting off, the initial attempt might be something as follows:
a::after {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
}

The above code block will create a pseudo element which will appear underneath the anchor.

  1. Then by setting a relative position on the table cells (td/th) and absolute position on the anchor's pseudo element — which will now be positioned relatively to its table cell. This achieves two main things: i) take the pseudo element out of normal document flow (so it doesn't take up it's own space in the cell), and ii) allows the 100% height and width properites to do its thing and match the cell dimensions.

    Additionally, you'll now have to position the pseudo element (either one of left: 0 or right: 0 with either a top: 0 or bottom: 0) to make sure that the pseudo element is aligned within the table cell and not from the top left corner of the anchor element. So we now have:
td, th {
    position: relative;
}
    
a::after {
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

  1. Unfortunately, you now have a problem — the pseudo element is covering the anchor. z-index: -1 is set on the pseudo element to get it to render underneath the anchor. However, the pseudo element will be underneath a lot of other elements as well, so it will no longer have the benefits of the increased clickable area.

    Setting a z-index: 0 to the table cell will address this problem by limiting the number of elements the pseudo element will be behind. By setting both position: relative and z-index: 0, you create a new stacking context. While the anchor will render above the table cell, its pseudo element will never render underneath the table cell now.

  2. So finally you are left with:

td, th {
    position: relative;
    z-index: 0;
}
    
a::after {
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

Some things to consider that may make this solution unsuitable for your use case:

  • You cannot set position: relative and/or z-index on the table cells
  • You are using the pseudo elements already on the anchor

JSFiddle demo: https://jsfiddle.net/hd7k4zau/53/

Adam
  • 146
  • 1
  • 3
  • 11