У меня есть таблица, которая включает ссылки (привязки), которые можно щелкнуть, чтобы отредактировать строку. Я хочу, чтобы эти ссылки были растянуты до полной ширины и высоты содержащейся ячейки. Я уже установил их в display: block;, чтобы они имели полную ширину:
Проблема в том, что мне сложно получить их на полную высоту с помощью CSS. См. Мою примерную скрипту здесь: http://jsfiddle.net/timbuethe/53Ptm/2/.
Задайте произвольно большой отрицательный запас и равное дополнение к элементу блока и переполнение, скрытое от родителя.
td {
overflow: hidden;
}
td a {
display: block;
margin: -10em;
padding: 10em;
}
Я не думаю, что это можно сделать, используя только CSS, потому что свойство height всегда ссылается на содержимое элементов, а не высота родительских элементов.
Снова проверьте Fiddle и посмотрите, как это делается с помощью простого javascript. Он извлекал высоту элементов родителей и сохранял ее в переменной, которая затем присоединяет правило стиля абзаца к вашему элементу привязки.
Вы можете исправить это с помощью небольшого 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 должно охватывать большинство пользователей.
Используя 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 1</td> cellLink - это просто имя, которое я изобрел - вы можете называть его любым именем, которое звучит логично для вас.
То же самое можно было бы сделать на целой строке, если вы разместите на нем тот же класс cellLink:
<tr class="cellLink">
<td>...</td>
...
</tr>
В этом случае было бы лучше называть его чем-то более общим.
Я собираюсь пойти с Jannis M ответить, но изменил его, чтобы использовать каждую высоту строки, например это:
$(document).ready(function(){
$('table tr').each(function(){
var $row = $(this);
var height = $row.height();
$row.find('a').css('height', height).append(' ');
});
});
Дополнительно я добавил , поскольку пустые ссылки (не содержащие текстовые узлы) не могут быть написаны (?).
См. мой обновленный fiddle.
UPDATE: Альтернативно см. Gaurav Saxena answer для решения только для CSS, которое работает в современных браузерах.