I have some tables on my site with some information for users to compare. The last column of the table consists of cells and there is a link to download the relevant application form (pdf) inside each of those cells. I want my users to be able to click anywhere in that cell to follow the link. I also want the entire space inside the border of that cell to change colour according to the :hover psuedo class I specify.
Problem: I cannot get the link (i.e. the <a> element) to fill the whole inside of the table cell (i.e. the <td> element).
I’ve used this CSS code:
.bursary_table tbody tr td a {
display:block;
height:100%;
width:100%;
}
The :hover pseudo class works, but it doesn’t stretch to fill the cell vertically. The only cell on the table that is being filled by it’s nested <a> element is the ‘fullest’ cell, i.e. the one with the most text that is determining the height of all the rest. Can someone please tell me how to fix this, thank you.
The anchor in one cell has no relationship with the anchor in another cell. The anchors will only be as tall as the content they hold. An anchor can’t be made to fill a whole table cell because things just don’t work like that.
You could make the whole cell change colour but not make the whole cell a link.
You can actually do it with the CSS display:table property and make the anchor itself a table-cell but this only works in ie8 and upwards and isn’t very semantic.
This would work with using a regular table mark up.
td a {display:table; background: orange; width:100%; border-spacing:10px/*border-spacing instead of padding*/}
td{padding:0; border-spacing:0}
IE8<, would have problems … sighs… whats new… but at least it would be a matter of using some JS to target TD A’s and setting the height to the parent TDs. A pain I know, but that IE for you.