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:
The problem is, I have trouble getting them to full height using CSS. See my example fiddle here: http://jsfiddle.net/timbuethe/53Ptm/2/.
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;
}
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.
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.
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 1</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.
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(' ');
});
});
Additional, I added a 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.
