Как увеличить связь по всей ячейке?

У меня есть таблица, которая включает ссылки (привязки), которые можно щелкнуть, чтобы отредактировать строку. Я хочу, чтобы эти ссылки были растянуты до полной ширины и высоты содержащейся ячейки. Я уже установил их в display: block;, чтобы они имели полную ширину:

Проблема в том, что мне сложно получить их на полную высоту с помощью CSS. См. Мою примерную скрипту здесь: http://jsfiddle.net/timbuethe/53Ptm/2/.

Ответы

Ответ 1

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

td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

http://jsfiddle.net/53Ptm/43/

Ответ 2

Я не думаю, что это можно сделать, используя только CSS, потому что свойство height всегда ссылается на содержимое элементов, а не высота родительских элементов.

Снова проверьте Fiddle и посмотрите, как это делается с помощью простого javascript. Он извлекал высоту элементов родителей и сохранял ее в переменной, которая затем присоединяет правило стиля абзаца к вашему элементу привязки.

Ответ 3

Вы можете исправить это с помощью небольшого javascript в каждой ячейке, чтобы javascript отправил пользователя на URL-адрес при нажатии на ячейку. Вы хотите использовать эту строку кода для каждой ячейки <td> </td>

<td bgcolor="lightgray" onClick="document.location.href='http://www.URLHERE.com/';" style="cursor:pointer;"><a>c 1</a></td>

Я сохранил < a </a> на месте, если у пользователя нет javascript, но фон ячейки останется нетронутым, и использование этого фрагмента javascript должно охватывать большинство пользователей.

Ответ 4

Используя jQuery, вы можете прикрепить прослушиватель событий click к всему элементу <td>.

Предполагая, что переменная redirectLink была определена ранее в script. например:
var redirectLink = "http://msmvps.com/blogs/jon_skeet/";
но это может быть любой другой удивительный URL, который вы выбрали;)

$(".cellLink").click(function(){
  // execute the redirect here 
  top.location.href = redirectLink;
});

$(".cellLinks") представляет собой jQuery Selector, который включает в себя все элементы класса cellLink на них. Пример:
<td class="cellLink">c&nbsp1</td>

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

То же самое можно было бы сделать на целой строке, если вы разместите на нем тот же класс cellLink:

<tr class="cellLink">
  <td>...</td>
  ...
</tr>

В этом случае было бы лучше называть его чем-то более общим.

Ответ 5

Я собираюсь пойти с Jannis M ответить, но изменил его, чтобы использовать каждую высоту строки, например это:

$(document).ready(function(){    
    $('table tr').each(function(){
        var $row = $(this);
        var height = $row.height();
        $row.find('a').css('height', height).append('&nbsp;');  
    });       
});

Дополнительно я добавил  , поскольку пустые ссылки (не содержащие текстовые узлы) не могут быть написаны (?).

См. мой обновленный fiddle.

UPDATE: Альтернативно см. Gaurav Saxena answer для решения только для CSS, которое работает в современных браузерах.