12

I have a table that includes links (anchors) that can be clicked to edit the row. I want these links to be stretched to the full width and height of the containing cell. I already set them to display: block; so they have the full width:

enter image description here

The problem is, I have trouble getting them to full height using CSS. See my example fiddle here: http://jsfiddle.net/timbuethe/53Ptm/2/.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Tim Büthe
  • 62,884
  • 17
  • 92
  • 129

5 Answers5

10

Set an arbitrarily large negative margin and equal padding on the block element and overflow hidden on the parent.

td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

http://jsfiddle.net/53Ptm/43/

zobier
  • 1,579
  • 2
  • 13
  • 11
2

I don't think that it can be made using only CSS, because the height property is always refering to the elements content, not the parent elements height.

Check the Fiddle again and see how it is made with a simple javascript. It fetched the parents elements height and saves it in a variable, which is then appended ass style rule to your anchor element.

Jannis M
  • 745
  • 1
  • 4
  • 15
  • You just take the first td's height, that not got if you have rows with different heights. I forked your fiddle and fixed that: http://jsfiddle.net/timbuethe/fNGEU/9/ – Tim Büthe Feb 06 '12 at 11:09
1

You can fix this with a little javascript on each cell so the javascript will send the user to a url when the cell is clicked on. You'll want to use this line of code for each cell < td > < / td >

<td bgcolor="lightgray" onClick="document.location.href='http://www.URLHERE.com/';" style="cursor:pointer;"><a>c 1</a></td>

I've kept the < a > < / a > tag in place just in case the user doesn't have javascript enabled, but the background of the cell will stay intact and using this piece of javascript should cover most users.

Danny S
  • 127
  • 1
  • 2
  • 13
0

Using jQuery you could attach a click event listener to the entire <td> element.

Assuming that the variable redirectLink was defined earlier in the script. for example :
var redirectLink = "http://msmvps.com/blogs/jon_skeet/";
but this could be any other awesome URL u choose ;)

$(".cellLink").click(function(){
  // execute the redirect here 
  top.location.href = redirectLink;
});

The $(".cellLinks") is a jQuery Selector that includes all elements with the cellLink class on them. example:
<td class="cellLink">c&nbsp1</td>

cellLink is just a name that I invented - you can call it whatever name sounds logical to you.

The same could be achieved on an entire row if you place the same cellLink class on it :

<tr class="cellLink">
  <td>...</td>
  ...
</tr>

In this case it might be a better idea to call it something more generic.

Lix
  • 47,311
  • 12
  • 103
  • 131
  • 2
    You can also use a custom tag like: `blah" and use $(".cellLink").click(function(){ // execute the redirect here top.location.href = $(this).attr("href"); }); – Eregrith Feb 03 '12 at 11:17
0

I'm gonna go with Jannis M's answer, but modified it to use each row's height like this:

$(document).ready(function(){    
    $('table tr').each(function(){
        var $row = $(this);
        var height = $row.height();
        $row.find('a').css('height', height).append('&nbsp;');  
    });       
});

Additional, I added a &nbsp; since empty links (not containing text nodes) can not be styled(?).

See my updated fiddle.

UPDATE: Alternatively see Gaurav Saxena's answer for a CSS only solution that works in modern browsers.

Community
  • 1
  • 1
Tim Büthe
  • 62,884
  • 17
  • 92
  • 129
  • Sorry but Gaurav's answer is incorrect. See my comment why in his post. The CSS only solution is zobier's solution, which is actually in both threads. – Ricardo Zea Apr 04 '13 at 18:03