Сделать ссылку в ячейке таблицы заполнять всю высоту строки

У меня есть таблица данных, и каждая ячейка является ссылкой. Я хочу, чтобы пользователь мог щелкнуть в любом месте ячейки таблицы и заставить их следовать по ссылке. Иногда ячейки таблицы имеют более одной строки, но не всегда. Я использую 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="#" onclick="location.href='http://www.google.com/'; return false;">Cell 1<br>
        second line</a>
      </td>
      <td>
        <a href="#" onclick="location.href='http://www.google.com/'; return false;">Cell 2</a>
      </td>
      <td>
        <a href="#" onclick="location.href='http://www.google.com/'; return false;">Cell 3</a>
      </td>
      <td>
        <a href="#" onclick="location.href='http://www.google.com/'; return false;">Cell 4</a>
      </td>
    </tr>
  </tbody>
</table>
</body>

Ответы

Ответ 1

Вам нужно небольшое изменение в CSS. Создание td height: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%;
}

Edit:

Вы сами дали решение в другом посте; который должен использовать 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>

В примере представлен здесь

Ответ 2

Задайте произвольно большой отрицательный запас и равное дополнение к элементу блока и переполнение, скрытое от родителя.

td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

http://jsfiddle.net/RXHuE/213/

Ответ 3

После взлома работ [Протестировано в Chrome/Firefox/Safari] Имейте то же самое дополнение для td и элементов привязки. А для якоря также есть маржа, которая равна -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/

Ответ 4

Немного поздно вечеринке, но там есть хорошее решение, которое я только что обнаружил.

Вы можете использовать комбинацию относительных и абсолютных позиционированных элементов, а также псевдоэлемент, чтобы получить эффект от вашего движения. Никакой дополнительной разметки не требуется!

Измените ячейку таблицы (<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;
}

Надеюсь, это поможет!

Ответ 5

Попробуйте 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/, но ни один из них не смешивает однострочные и многострочные ячейки. Похоже, вы попали в мертвое место.

Ответ 6

Я отправлю тот же ответ здесь, как я сделал на мой собственный вопрос.

Вдохновленный Jannis M answer, я сделал следующее:

$(document).ready(function(){    
    $('table tr').each(function(){
        var $row = $(this);
        var height = $row.height();
        $row.find('a').css('height', height).append('&nbsp;');  
    });       
});

Я добавил &nbsp;, так как пустые ссылки (не содержащие текстовые узлы) не могут быть написаны (?).

См. мой обновленный fiddle.

Ответ 7

Вы можете использовать небольшой javascript.

  <td onclick="window.location='http://www.google.com/'">
    <a href="http://www.google.com/">Cell 3</a>
  </td>

Или вы можете создать элемент, который полностью заполняет ячейку (div, span, whatever) и обертывает вокруг вашего большого невидимого элемента.

  <td>
    <a href="http://www.google.com/">
      <div style="width:100%; height:100%;">Cell 1<br>
      second line
      </div>
    </a>
  </td>

Ответ 8

Проблема только в том, что использование display: block заставляет браузер игнорировать вертикальный align: center...

упс.

Я присягнул, чтобы он выглядел правильно для одной ячейки с высотой: 60 и шрифтом, который занимал 20 пикселей, добавляя br... Тогда я понял, что у меня есть некоторые элементы с текстом из 2 строк. Dang.

В итоге я использовал javascript. Javascript не дает приятного мышиного заостренного элемента clicker, но строка текста делает, поэтому он фактически вызовет визуальный ответ, а не где я хочу... Затем Javascript поймает все клики, которые "пропущены" 'фактический href.

Возможно, это не самое элегантное решение, но на данный момент оно достаточно хорошо работает.

Теперь, если бы я мог только выяснить, как это сделать правильно...

Любые идеи о том, как добавить значок мыши в ручную для области, охватываемой onclick? Прямо сейчас, щелчок на странице работает, но значок изменяется только тогда, когда он попадает в href, который влияет только на текст.

Ответ 9

Почему бы вам просто не избавиться от altogheter <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: Я знаю, что это спросили и ответили много лет назад, но ни один из ответов выше не решил проблему в моем случае. Надеюсь, это поможет кому-то.

Ответ 10

Для меня единственным решением является замена <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>