Jump to content


This topic is now archived and is closed to further replies.


<a> entire inside of table cell

Recommended Posts

I'm at my wit's end here... any help would be greatly appreciated!

I'm building navigation tabs in a single-row <table>.

Any given tab may have one, two, or three lines of text. Text must be in the middle vertically and horizontally centered.

Here's the kicker: the entire inside area of the table cell must be clickable. In other words, the <a> has to fill the entire height and width of each cell -- regardless of how many lines of text.

When I have one cell with three lines of text, and another cell with only one, I can't seem to get it working.

I can either get the entire cell clickable, but the text aligned at the top. Or, I can get the text vertically in the middle, but the entire cell is not clickable. Frustrating.

Before anyone says, "why not use a list?", I've already been down that road. Can't meet all of the above requirements using <li>'s, no matter how many CSS tricks I've thrown at it. So, I'm going with a table.

Must work in FF and IE 5.5, 6
#tabs td{border:1px solid #000;font-size:3em;text-align:center;vertical-align:middle;}
#tabs a{background-color:green;display:block;height:100%;text-decoration:none;}
#tabs a:hover{background-color:yellow;}

<div id="tabs">
<td><a href="#">tab 1</a></td>
<td><a href="#">tab 2<br/>line two</a></td>
<td><a href="#">tab 3<br/>line two<br/>line three</a></td>

Share this post

Link to post
Share on other sites


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.