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

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 всегда ссылается на содержимое элементов, а не на высоту родительских элементов.

Проверьте Fiddle еще раз и посмотрим, как это делается с помощью простого 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 s answer , но изменил его, чтобы использовать высоту каждой строки следующим образом:

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

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

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

UPDATE: В качестве альтернативы см. Gaurav Saxena ' answer для решения только для 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 Selector , который включает в себя все элементы с классом cellLink. Пример:
<td class="cellLink">c&nbsp1</td>

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

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

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

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