Ссылка на всю строку таблицы?
Проблема: Как сделать всю строку в таблице ссылкой?
Я знаю, что можно сделать целую ячейку таблицы кликабельной с помощью CSS. Вот пример кода:
.tableClass td a {
display: block;
}
Однако мне нужно, чтобы вся строка таблицы была ссылкой. Есть ли способ сделать это? Если у кого-то есть идеи или примеры, буду признателен за помощь!
1 ответ(ов)
К сожалению, нет. Невозможно использовать только HTML и CSS для этого. Вам нужен элемент <a>, чтобы создать ссылку, и вы не можете обернуть всю строку таблицы в один такой элемент.
Ближе всего к решению будет сделать ссылки на каждую ячейку таблицы. Лично я бы сделал ссылкой только одну ячейку и использовал JavaScript, чтобы сделать остальные ячейки кликабельными. Для ясности стоит хотя бы одна ячейка выглядеть как ссылка, выделенная подчеркиванием и т.д.
Вот простой фрагмент кода на jQuery, который делает все строки таблицы кликабельными (он ищет первую ссылку и "кликает" по ней):
$("table").on("click", "tr", function(e) {
if ($(e.target).is("a,input")) // исключаем элементы, на которые не хотим реагировать
return;
location.href = $(this).find("a").attr("href");
});
Как расположить div внизу своего контейнера?
Установить фиксированную ширину столбца таблицы независимо от количества текста в ячейках?
Как сделать перенос строки с помощью CSS, не используя <br />?
Стоит ли использовать единицы px или rem в CSS? [закрыто]
Как изменить цвет заливки SVG-изображения при использовании его в качестве фонового изображения?