SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    links inside table cells, clickable area won't fill cell.

    Hello

    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:

    Code CSS:
    .bursary_table tbody tr td a {
    	display:block;
    	height:100%;
    	width:100%;
    	}

    and this too

    Code CSS:
    .bursary_table tbody tr td a:hover {
    	background-color:#e9e9e9;
    	}

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are dealing with separate elements here.

    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.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .test {
        margin:0;
        padding:0;
        display:table;
    }
    .test a {
        background:red;
        vertical-align:middle;
        border-right:10px solid #fff;
        padding:10px;
        display:table-cell;
        text-decoration:none;
    }
    .test a:hover {background:blue}
    .test span{
        position:absolute;
        top:-999em;
        left:-999em;
    }
    </style>
    </head>
    <body>
    <div class="test">
        <a href="#">test<br />
            test</a><span>|</span>
        <a href="#">test</a><span>|</span>
        <a href="#">test</a><span>|</span>
        <a href="#">test</a><span>|</span>
        <a href="#">test</a><span>|</span>
        <a href="#">test</a><span>|</span>
        <a href="#">test</a><span>|</span>
    </div>
    </body>
    </html>
    To cater for other browsers you will probably have to set a specific height if you want them to all be equal height.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    This would work with using a regular table mark up.

    Code:
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    This would work with using a regular table mark up.

    Code:
    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.
    Hi Dresden

    Sorry to disagree but I already tried that lol It won't account for the height if some text is larger than others.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    td a {
        display:table;
        background: orange;
        width:100%;
        border-spacing:10px/*border-spacing  instead of padding*/
    }
    td {
        padding:0;
        border-spacing:0
    }
    </style>
    </head>
    <body>
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td><a href="#">test<br />test<br />test</a></td>
            <td><a href="#">test</a></td>
            <td><a href="#">test</a></td>
        </tr>
    </table>
    </body>
    </html>

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Darn.. you are right, as usual, Paul.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •