Estoy tratando de poner un enlace en un<th> elemento y tener el<a>l elemento @ llena todo el espacio de la<th>. Si bien puedo hacer que se llene horizontalmente con ancho: 100%, hacer que se llene verticalmente está resultando problemático. altura: 100% parece no tener efecto.

Quiero hacer esto para que el usuario pueda hacer clic en cualquier lugar de la celda para activar el enlace. Sé que podría poner una propiedad onClick en la<th> en sí mismo y manejarlo a través de javascript, pero me gustaría hacerlo de la manera "correcta" css.

Aclaración Cada fila de la tabla puede tener una altura diferente porque el contenido es dinámico, por lo que las soluciones que usan una altura fija para la<a> o<th> elementos no funcionarán.

Aquí hay un código de muestra:

<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>

Y aquí hay una página con exactamente el mismo código

omo puede ver si pasa el mouse sobre el enlace, la<a>l elemento @ no se llena verticalmente, lo que produce una apariencia incómoda. Podría arreglar el fondo de desplazamiento colocando un "th: desplaza un ", pero el enlace solo funcionaría si hicieras clic donde la @ rea etiqueta es.