Question

I am trying to put a link in a <th> element and have the <a> element fill the entire space of the <th>. While I can get it to fille horizontally with width:100%, getting it to fill vertically is proving to be troublesome. height:100% seems to have no effect.

I want to do this so that the user can click anywhere in the cell to activate the link. I know I could put an onClick property on the <th> itself and handle it via javascript, but I would like to do it the ‘proper’ css way.

Clarification: Each row of the table can have a different height because the content is dynamic, so solutions that use a fixed height for the <a> or <th> elements will not work.

Here is some sample code:

<style type='text/css'> th {   font-size: 50%;   width: 20em;   line-height: 100%; } th a {   display:block;   width:100%;   height:100%;   background-color: #aaa; } th a:hover {   background-color: #333 } </style> <table border=1>   <tr>     <th><a href='foo'>Link 1</a></th>     <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor.</td>   </tr>   <tr>     <th><a href='foo'>Link 2</a></th>     <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. </td>   </tr> </table> 

And here is a page with that exact same code

As you can see if you mouseover the link, the <a> element is not filling vertically which produces an awkward look. I could fix the hover background by putting it in a ‘th:hover a‘ style, but the link would still only actually function if you clicked where the actual a tag is.

Answer 1

just change th style to this

th {   font-size: 50%;   width: 20em;   height: 100%;   line-height: 100%;  } 

cheers