[ACCEPTED]-Make <th> clickable: Setting a <a> element inside the <th> on 100% width & height-css
You have to display the a inside the ths as 1 a block-level element:
th a {
display: block;
}
You need to set display:block on your links in the headers. height:width 3 attributes are ignored on inline elements;
th a
{
display:block;
background-color: Fuchsia;
/* Making the headerlinks 100% width */
width:100%;
/* Making the headerlinks 100% height ??? */
height: 100%;
}
Edit: Forgot 2 to mention that for 100% height to work, the 1 parent needs to have a height specified, e.g.
th
{
height: 40px;
}
Probably not plausible, but in some cases 1 setting
th {
white-space: nowrap;
}
Gets rid of the problem altogether.
You could set an arbitrary height to each 9 link to quite long: (6em maybe?) then set 8 a max height on the table cell th's to something 7 shorter: (3em?) with an overflow hidden. This 6 way all the links will be taller than the 5 table cell is high but chopped off by the 4 overflow hidden - they should all be pink 3 and clickable. Make sure you set a display:relative; on the 2 th's otherwise old versions of IE won't chop 1 off any overflow. Good luck :)
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.