[ACCEPTED]-Make <th> clickable: Setting a <a> element inside the <th> on 100% width & height-css

Accepted answer
Score: 14

You have to display the a inside the ths as 1 a block-level element:

th a {
    display: block;
Score: 4

You need to set display:block on your links in the headers. height:width 3 attributes are ignored on inline elements;

th a
    background-color: Fuchsia;

    /* Making the headerlinks 100% width */

    /* 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.

    height: 40px;
Score: 0

Probably not plausible, but in some cases 1 setting

th {
    white-space: nowrap;

Gets rid of the problem altogether.

Score: 0

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