Have Geek Brain

Make <th> clickable: setting the <a> element inside the <th> to 100% width and height

I have a CSS issue that I'm stuck with .. I can't get my links for links to get 100% height; without using javascript.

I tried a lot of things that I found while searching the web, but none of them fixed my problem.

I get this result:

alt text http://thomasstock.net/css100percent.jpg

This is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>
                    <a href="#">header 1</a>
                </th>
                <th>
                    <a href="#">some very very very very very very very very very long header 2</a>
                </th>
                <th>
                    <a href="#">3</a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    cell a1
                </td>
                <td>
                    cell a2
                </td>
                <td>
                    cell a3
                </td>
            </tr>
            <tr>
                <td>
                    cell b1
                </td>
                <td>
                    cell b2
                </td>
                <td>
                    cell b3
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

With this css:

table
{
    width: 300px;
    border-collapse: collapse;
}
th, td
{
    border: solid 1px;
}

th a
{
    background-color: Fuchsia;

    /* Making the headerlinks 100% width */
    width:100%;
    float:left;

    /* Making the headerlinks 100% height ??? */
    height: 100%; /* doesnt work! */
    min-height:100%;
}
tr
{
    height:100%;
}

download this code here

=> How do I make the titles completely pink and interactive? (without using javascript?)

+1


a source to share


4 answers


You have to render a

internally th

as a block level element :



th a {
    display: block;
}
+11


a source


You need to set display:block

in your links in the headers. height: width 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 to mention that for a height of 100% to work, the parent must have the specified height, for example.

th 
{
    height: 40px;
}
+2


a source


Probably not believable, but in some cases setting

th {
    white-space: nowrap;
}

Get rid of the problem completely.

0


a source


You can set an arbitrary height for each link for quite a long time: (maybe, maybe?), Then set the maximum height in a table cell th

to something shorter: (3em?) With hidden overflow. Thus, all links will be higher than the table cell, but severed when overflowing hidden - they should all be pink and clickable. Make sure you set display:relative;

to th

, otherwise older versions of IE won't break overflow. Good luck :)

0


a source






More articles:


All Articles