Сделать ссылку в ячейке таблицы на всю высоту строки
У меня есть таблица данных, и каждая ячейка является ссылкой. Я хочу, чтобы пользователь мог щелкнуть в любом месте ячейки таблицы и попросить его перейти по ссылке. Иногда ячейки таблицы занимают более одной строки, но не всегда. Я использую td a {display: block}, чтобы получить ссылку на большую часть ячейки. Когда в строке есть одна ячейка, которая состоит из двух строк, а остальные - только из одной строки, одни вкладки не заполняют все вертикальное пространство строки таблицы. Вот пример HTML, и вы можете увидеть его в действии здесь: http://www.jsfiddle.net/RXHuE/:
<head>
<style type="text/css">
td {width: 200px}
td a {display: block; height:100%; width:100%;}
td a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
<a href="http://www.google.com/">Cell 2</a>
</td>
<td>
<a href="http://www.google.com/">Cell 3</a>
</td>
<td>
<a href="http://www.google.com/">Cell 4</a>
</td>
</tr>
</tbody>
</table>
</body>
10 ответов
Вам нужно небольшое изменение в вашем CSS. Изготовление tdheight:100%; работает для IE 8 и FF 3.6, но не работает для Chrome.
td {
width: 200px;
border: solid 1px green;
height: 100%
}
td a {
display: block;
height:100%;
width:100%;
}
Но делая height в 50px работает на Chrome в дополнение к IE и FF
td {
width: 200px;
border: solid 1px green;
height: 50px
}
td a {
display: block;
height:100%;
width:100%;
}
Редактировать:
Вы дали решение самостоятельно в другом посте здесь; который должен использовать display: inline-block;, Это работает в сочетании с моим решением для Chrome, FF3.6, IE8
td {
width: 200px;
border: solid 1px green;
height: 100%}
td a {
display: inline-block;
height:100%;
width:100%;
}
Обновить
Следующий код работает для меня в IE8, FF3.6 и Chrome.
CSS
td {
width: 200px;
border: solid 1px green;
height: 100%;
}
td a {
display: inline-block;
height:100%;
width:100%;
}
td a:hover {
background-color: yellow;
}
HTML
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
<a href="http://www.google.com/">Cell 2</a>
</td>
<td>
<a href="http://www.google.com/">Cell 3</a>
</td>
<td>
<a href="http://www.google.com/">Cell 4</a>
</td>
</tr>
</tbody>
</table>
Пример лежит здесь
Установите произвольно большое отрицательное поле и равный отступ для элемента блока и переполнение, скрытое в родительском элементе.
td {
overflow: hidden;
}
td a {
display: block;
margin: -10em;
padding: 10em;
}
Немного опоздал на вечеринку, но я нашел хорошее решение.
Вы можете использовать комбинацию элементов относительного и абсолютного позиционирования, а также псевдоэлемента, чтобы получить желаемый эффект. Никакой дополнительной разметки не требуется!
Изменить ячейку таблицы (<td>), быть position: relative;и создать ::before или же ::after псевдоэлемент на <a> тег и установите его position: absolute;, а также использовать top: 0; left: 0; right: 0; bottom: 0;,
Поскольку псевдоэлемент присоединен к тегу привязки, и вы говорите ему, чтобы он занимал всю ячейку таблицы, он заставит тег привязки иметь по крайней мере тот же размер, не затрагивая при этом фактическое содержимое самого тега привязки (тем самым сохраняя свое центральное выравнивание).
Например
HTML:
<table>
<tr>
<td>
<a>I'm centralised</a>
</td>
<td>
<a>I'm 100% width</a>
</td>
<td>
<a>AND I'm 100% height</a>
</td>
<td>
<a>WITHOUT extra markup</a>
</td>
<td>
<a>OR JavaScript!</a>
</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
table-layout: fixed;
}
td {
position: relative;
width: 150px;
border: 2px solid red;
}
td a {
padding: 0.5em 1em;
}
td a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Надеюсь это поможет!
Следующие хакерские работы [Проверено на Chrome / Firefox / Safari] Имеют одинаковые отступы для элементов td и anchor. И для якоря также есть запас, который равен -ve от значения дополнения.
HTML
<table>
<tr>
<td><a>Hello</a></td>
</tr>
</table>
CSS:
td {
background-color: yellow;
padding: 10px;
}
a {
cursor:pointer;
display:block;
padding: 10px;
margin: -10px;
}
Рабочая скрипка: http://jsfiddle.net/JasYz/
Пытаться display: block:
td a {display: block; height:100%;}
[EDIT] WTF... Я могу подтвердить, что это не работает в FF 4 и Chrome. Это работает:
td a {display: block; height: 2.5em; border: 1px solid red;}
Это говорит о том, что height:100%; не определено в ячейке таблицы. Возможно, это связано с тем, что ячейка получает свой размер от содержимого (поэтому содержимое не может сказать "скажи мне свой размер", потому что это приведет к циклу). Это даже не работает, если вы установите высоту для ячеек следующим образом:
td {width: 200px; height: 3em; padding: 0px}
Снова приведенный выше код потерпит неудачу. Поэтому я предлагаю использовать для ссылок определенную высоту (вы можете опустить ширину; по умолчанию это 100% для элементов блока).
[EDIT2] Я просмотрел сотню примеров на http://www.cssplay.co.uk/menus/ но ни один из них не смешивал однострочные и многострочные ячейки. Похоже, вы попали в слепую зону.
Я опубликую здесь тот же ответ, что и на свой вопрос.
Вдохновленный ответом Jannis M, я сделал следующее:
$(document).ready(function(){
$('table tr').each(function(){
var $row = $(this);
var height = $row.height();
$row.find('a').css('height', height).append(' ');
});
});
Я добавил поскольку пустые ссылки (не содержащие текстовые узлы) не могут быть стилизованы (?).
Смотрите мою обновленную скрипку.
Я использовал это решение: в моем случае работает лучше остальных.
CSS:
.blocktd {width: 100%; height: 100%; padding: 0px; overflow: hidden}
a.blocktd {margin: 0em; padding: 50px 20px 50px 20px; display: block;}
a.blocktd:hover {border: 4px solid #70AEE8; border-radius: 10px; padding: 46px 16px 46px 16px; transition: 0.2s;}
И в HTML:
<a href="..." class="blocktd">...</a>
Единственная проблема здесь в том, что использование display: block заставляет браузер игнорировать выравнивание по вертикали: center...
упс.
Я поставил жюри, чтобы он выглядел правильно для одной ячейки с высотой:60 и шрифтом, который занимал 20 пикселей, добавив br... Затем я понял, что у меня есть некоторые элементы с двухстрочным текстом. Dang.
Я закончил тем, что использовал JavaScript. Javascript не дает приятного мышиного остроконечного кликера, но строка текста делает, так что он фактически вызовет визуальный ответ, просто не там, где я хочу... Тогда Javascript поймает все щелчки, которые пропускают фактический HREF.
Возможно, не самое элегантное решение, но пока оно работает достаточно хорошо.
Теперь, если бы я только мог понять, как сделать это правильно....
Любые идеи о том, как добавить значок мыши к руке для области, покрытой онкликом? Прямо сейчас, щелчок по странице работает, но значок изменяется только тогда, когда он достигает href, который влияет только на текст.
Вы можете использовать немного JavaScript.
<td onclick="window.location='http://www.google.com/'">
<a href="http://www.google.com/">Cell 3</a>
</td>
Или вы можете создать элемент, который полностью заполняет ячейку (div, span и т. Д.) И обернуть вокруг вашего большого невидимого элемента.
<td>
<a href="http://www.google.com/">
<div style="width:100%; height:100%;">Cell 1<br>
second line
</div>
</a>
</td>
Для меня единственным решением является замена <table><tr> с <div> и стиль их использования display:table а также display:table-row соответственно.
Тогда вы можете заменить <td> просто <a> и стиль с display:table-cell,
Отлично работают даже на разной высоте <td> содержание.
Итак, оригинальный HTML без якорей:
<table>
<tr>
<td>content1<br>another_line</td>
<td>content2</td>
</tr>
</table>
теперь становится:
a:hover
{
background-color:#ccc;
} <div style="display:table; width:100%">
<div style="display:table-row">
<a href="#" style="display:table-cell; border:solid 1px #f00">content1<br>another_line</a>
<a href="#" style="display:table-cell; border:solid 1px #f00">content2</a>
</div>
</div>Почему бы тебе просто не избавиться от <a> альтогетер и добавить onClick к <td> напрямую?
<head>
<style type="text/css">
td {
text-align:center;
}
td:hover {
cursor:pointer;
color:#F00;
}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td onclick="location.href='http://www.google.com/';">Cell 1<br />second line</td>
<td onclick="location.href='http://www.google.com/';">Cell 2</a></td>
<td onclick="location.href='http://www.google.com/';">Cell 3</td>
<td onclick="location.href='www.google.com';">Cell 4</td>
</tr>
</tbody>
</table>
Таким образом, вы вырезали среднего человека.
PS: я знаю, что об этом спрашивали и отвечали много лет назад, но ни один из приведенных выше ответов не решил проблему в моем случае. Надеюсь, это кому-нибудь поможет.