Как сделать ссылку из ячейки таблицы <td> - PullRequest
Новая
       13

Как сделать ссылку из ячейки таблицы <td>

56 голосов
/ 26 июля 2010

У меня есть следующее: 

<td>
  some text
  <div>a div</div>
</td>

Я бы хотел сделать всю <td>...</td> гиперссылкой. Я бы предпочел без использования JavaScript. Возможно ли это?

Ответы [ 6 ]

85 голосов
/ 26 июля 2010

Да, это возможно, хотя не буквально <td>, но что в нем.Простой трюк заключается в том, чтобы убедиться, что содержимое распространяется до границ ячейки (хотя оно и не включает сами границы).

Как уже объяснено, это не является семантически правильным.Элемент a является встроенным элементом и не должен использоваться в качестве элемента уровня блока.Тем не менее, вот пример (но JavaScript и стиль td: hover CSS будут намного удобнее), который работает в большинстве браузеров: 

<td>
  <a href="http://example.com">
    <div style="height:100%;width:100%">
      hello world
    </div>
  </a>
</td>

PS: на самом деле лучше изменить a на уровне блокаЭлемент, использующий CSS как , объяснен в другом решении в этой теме .Это не будет хорошо работать в IE6, но это не новость;)

Альтернативное (не рекомендованное) решение

Если ваш мир - только Internet Explorer (редко, в настоящее время), вы можетенарушите стандарт HTML и напишите это, он будет работать, как и ожидалось, но будет неодобрительным и будет считаться опрометчивым (вы не слышали этого от меня).Любой другой браузер, кроме IE, не будет отображать ссылку, но будет правильно отображать таблицу. 

<table>
    <tr>
        <a href="http://example.com"><td  width="200">hello world</td></a>
    </tr>
</table>
30 голосов
/ 20 февраля 2013

Используйте этот код.Он расширяет <a>, чтобы заполнить ячейку по горизонтали.Для вертикального заполнения также используйте свойство height. 

td a {
  width: 100%;
  display: block;
}

td {
  /* Cell styles for demonstration purposes only */
  border: 1px solid black;
  width: 10em;
}
<table><tr>
  <td>
    <a href="http://example.com">
      Hello World
    </a>
  </td>
</tr></table>
12 голосов
/ 26 июля 2010

Я бы порекомендовал использовать фактический элемент привязки и установить его в качестве блока. 

<div class="divBox">
    <a href="#">Link</a>
</div>

.divBox
{
    width: 300px;
    height: 100px;
}
.divBox a
{
    width: 100%;
    height: 100%;
    display: block;
}

Это установит привязку к тем же измерениям родительского элемента div.

4 голосов
/ 12 апреля 2014

Вот мое решение: 

<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)

1 голос
/ 26 июля 2010

Я бы хотел, чтобы весь тд гиперссылка. Я бы предпочел без JavaScript. Возможно ли это?

Это невозможно без JavaScript. Кроме того, это не будет семантической разметкой. Вместо этого вы должны использовать ссылку, в противном случае вам нужно присоединить обработчик onclick к <td>, чтобы перенаправить на другую страницу.

0 голосов
/ 01 апреля 2016

Вы можете создать нужную таблицу, сохранить ее как изображение, а затем использовать карту изображений для создания ссылки (таким образом, вы можете поместить координаты отверстия td, чтобы сделать его ссылкой).

...