Разверните размер элемента привязки до размера ячейки родительской таблицы.

Question

У меня в основном есть следующее:

<table>
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="..."></a>
      </td>
    </tr>
  </tbody>
</table>

Предположим, что ячейка таблицы имеет некоторую ширину и высоту, как это создано дополнительными элементами ячейки таблицы и заголовка таблицы.

Мне нужно, чтобы этот элемент привязки расширялся до той же ширины и высоты ячейки таблицы, чтобы вы могли щелкнуть в любом месте ячейки, чтобы перейти к ссылке. Как это сделать, чтобы он был совместим с разными браузерами?

Уточнение Недопустимая настройка ячейки таблицы на фиксированную ширину или высоту.

Answer 1

установить стиль якоря на:

 style="display: block; height: 100%; width:100%;"

Answer 2

Внутри ссылки поместите пустой интервал.Вы можете либо дать ему класс и добавить css, либо придать ему встроенный стиль.

Я предпочитаю добавить такой класс:

<table>
<thead>
<tr>
  <th>Header</th>
</tr>
</thead>
<tbody>
<tr>
  <td>
      <a id="anchor" href="#"><span class="linkfill"></span>Link</a>
  </td>
 </tr>
</tbody>

<style>
.linkfill {
position: absolute;
width: 100%;
height: 100%;
}
</style>

Это согнется с вашим столом.рабочая скрипка: http://jsfiddle.net/zGWTk/6/

Answer 3

После взлома работает [Проверено на Chrome / Firefox / Safari] Имеют одинаковые отступы для элементов td и anchor. И для якоря также есть запас, равный -ve значения дополнения.

HTML

<table>
    <tr>
        <td><a>Hello</a></td>
    </tr>
</table>

CSS:

td {                          
    background-color: yellow;                                                                              
    padding: 10px;                                                                                                            
}  
a {
    cursor:pointer;
    display:block;
    padding: 10px;
    margin: -10px;
}

Рабочая скрипка: http://jsfiddle.net/JasYz/