аюсь поместить ссылку в<th> элемент и иметь<a> элемент заполнить все пространство<th>, Хотя я могу сделать так, чтобы он располагался горизонтально с шириной: 100%, заполнение по вертикали оказалось проблематичным. высота: 100%, кажется, не имеет никакого эффекта.

Я хочу сделать это, чтобы пользователь мог щелкнуть в любом месте ячейки, чтобы активировать ссылку. Я знаю, что могу добавить свойство onClick на<th> сам и обрабатывать его с помощью JavaScript, но я хотел бы сделать это "правильный" способ CSS.

Разъяснение: Каждая строка таблицы может иметь различную высоту, поскольку содержимое является динамическим, поэтому решения, использующие фиксированную высоту для<a> или же<th> элементы не будут работать.

Вот пример кода:

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

И вот страница с тем же кодом

Как вы можете видеть, если вы наведите курсор мыши на ссылку,<a> элемент не заполняется вертикально, что создает неловкий вид. Я мог бы исправить фон наведения, поместив его в "th: наведите"стиль, но ссылка будет по-прежнему функционировать, только если вы нажмете, где фактическаяa тег есть.