Как можно связать всю ячейку таблицы в html без javascript или jquery?Как сделать ячейку таблицы гиперссылки
Я пытался поставить HREF в себя, но его не работает, по крайней мере, в хроме тд теге 18
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
Попробуйте это:
HTML:
<table width="200" border="1" class="table">
<tr>
<td><a href="#"> </a></td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
.table a
{
display:block;
text-decoration:none;
}
Надеюсь, он будет работать нормально.
да, это лучший способ, но вы забыли проблему вертикального выравнивания! используя этот способ, мы не можем поместить ссылку точно в центр элемента td ... протестируйте его самостоятельно ... со стилем = "display: block;" и без style = "display: block;" я думаю, что, возможно, способ JavaScript лучше, потому что сегодня JavaScript необходим для каждого ... посмотрите на мой ответ ... –
Попробуйте так:
<td><a href="..." style="display:block;"> </a></td>
Спасибо за быстрый ответ, но
PS: Стиль = "display: block" в элементе заставит его занять все пространство внутри
Да, это лучший способ, но вы забыли проблему вертикального выравнивания! используя этот способ, мы не можем поместить ссылку точно в центр элемента td ... протестируйте его самостоятельно ... со стилем = "display: block;" и без style = "display: block;" Я думаю, что, возможно, способ javascript лучше, потому что сегодня javascript необходим для каждого ... –
Вот мое решение:.
<td>
<a href="/yourURL"></a>
<div class="item-container">
<img class="icon" src="/iconURL" />
<p class="name">
SomeText
</p>
</div>
</td>
(LESS)
td {
padding: 1%;
vertical-align: bottom;
position:relative;
a {
height: 100%;
display: block;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
.item-container {
/*...*/
}
}
Как это вы все еще можете извлечь выгоду из некоторых свойств ячеек таблицы, как vertical-align (Проверено на Chrome)
Этот вид работы, но когда я перемещаю курсор над ячейкой, он чередуется между указателем и рукой , – Hawkee
на мой взгляд, патч не очень хороший способ –
Easy с функцией onclick и ссылкой javascript:
<td onclick="location.href='yourpage.html'">go to yourpage</td>
При использовании других ответов ссылка не обязательно занимает все пространство в элементе '
Это также не создает настоящую гиперссылку, поэтому, например, конечный пункт ссылки не отображается в нижней части представления в Chrome, и вы не можете щелкнуть Ctrl, чтобы открыть пункт назначения на новой вкладке и т. Д. – ChrisFox
Я также искал решение, и только что нашел этот код на другом сайте:
<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>
Это isn ' t очень хорошее решение, потому что он использует JavaScript, где доступно простое решение HTML. Это сделает ссылку непривлекательной для пользователей без JavaScript. – Zaz
Спасибо @ Крист, ты дал мне подсказку. – Jaikrat
@Zaz: Сегодня JavaScript необходим для каждого ... он находится где угодно, даже в старом смартфоне ... и по умолчанию он включен. –
Проблемы:
(Пользователь: Kamal) Это хороший но вы забыли проблему вертикального выравнивания! используя этот способ, мы не можем поместить ссылку точно в центр элемента TD! даже с вертикальным выравниванием: среднее;
(Пользователь: Christ) Ваш ответ - лучший ответ, потому что нет никакой проблемы с выравниванием, а также сегодня JavaScript необходим для каждого ... он находится где угодно даже в старом смартфоне ... и это позволит по умолчанию ...
мое предложение, чтобы завершить ответ (Пользователь: Christ):
HTML:
<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>
CSS:
a.LN1 {
font-style:normal;
font-weight:bold;
font-size:1.0em;
}
a.LN2:link {
color:#A4DCF5;
text-decoration:none;
}
a.LN3:visited {
color:#A4DCF5;
text-decoration:none;
}
a.LN4:hover {
color:#A4DCF5;
text-decoration:none;
}
a.LN5:active {
color:#A4DCF5;
text-decoration:none;
}
Почему бы не совместить метод OnClick с <a> элементом внутри <td> для резервного копирования для не-JS? Кажется, отлично работает.
<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>
Я видел это раньше, когда люди пытаются создать календарь. Вы хотите, чтобы связанная с ячейкой, но не хотите вмешиваться во что-либо еще внутри нее, попробуйте это, и это может решить вашу проблему.
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
копия http://stackoverflow.com/questions/3337914/how-to-make-a-td-a-link – Usman
Уже обсуждалось. Ответ здесь: http://stackoverflow.com/a/3966257/1320588 С уважением. – sleepwalker
@vaichidrewar вы можете проголосовать, чтобы закрыть вопрос как дубликат другого вопроса, теперь у вас более 3000 репутации. –