Как растянуть ссылку на всю клетку?

Question

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

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

Смотрите мою обновленную скрипку.

ОБНОВЛЕНИЕ: В качестве альтернативы см. Ответ Gaurav Saxena на решение только для CSS, которое работает в современных браузерах.

Answer 5

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

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

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

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

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

То же самое может быть достигнуто на всем ряду, если вы поместите тот же cellLink класс по нему:

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

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