Estou tentando colocar um link em um<th> e tenha o<a> elemento @ preenche todo o espaço do<th>. Embora eu consiga arquivar horizontalmente com largura: 100%, fazê-lo encher verticalmente está se mostrando problemático. height: 100% parece não ter efeito.

Eu quero fazer isso para que o usuário possa clicar em qualquer lugar da célula para ativar o link. Eu sei que eu poderia colocar uma propriedade onClick no<th> e manipule-o via javascript, mas gostaria de fazê-lo da maneira "adequada" em cs

Esclarecimento Cada linha da tabela pode ter uma altura diferente porque o conteúdo é dinâmico, portanto, soluções que usam uma altura fixa para o<a> ou<th> elementos não funcionarão.

Aqui está um código de exemplo:

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

E aqui está uma página com exatamente o mesmo código

Como você pode ver se passa o mouse sobre o link, o<a> elemento @ não está sendo preenchido verticalmente, o que produz uma aparência estranha. Eu poderia consertar o fundo do foco colocando-o em um "th: passe o mouse ", mas o link ainda funcionaria apenas se você clicasse onde o @ rea tag é.