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

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

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

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

следующие хакерские работы [протестировано на 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/

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

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

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

надеюсь, что это помогает!

попробовать 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 М ' s ответ Я сделал следующее:

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

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

смотрите мои обновленные скрипка.

Вы можете использовать немного 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>

единственная проблема здесь заключается в том, что использование display: block заставляет браузер игнорировать вертикальное выравнивание: центр...

упс.

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

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

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

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

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

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

для меня единственным решением является замена <table><tr> С <div>S и стиль их с помощью 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>