Сделать ссылку в ячейке таблицы на всю высоту строки - PullRequest
Новая
       26

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

62 голосов
/ 19 октября 2010

У меня есть таблица данных, и каждая ячейка является ссылкой.Я хочу, чтобы пользователь мог щелкнуть в любом месте ячейки таблицы и попросить его перейти по ссылке.Иногда ячейки таблицы занимают более одной строки, но не всегда.Я использую 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 ]

97 голосов
/ 04 апреля 2013

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

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

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

42 голосов
/ 19 октября 2010

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

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 голосов
/ 03 сентября 2017

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

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

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

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

2 голосов
/ 12 апреля 2013

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

1 голос
/ 06 февраля 2012

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

Вдохновленный Яннис М ответ , Я сделал следующее: 

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

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

См. Мой обновленный скрипка .

1 голос
/ 19 октября 2010

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

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

Для меня единственное решение - заменить <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>
0 голосов
/ 04 сентября 2015

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

0 голосов
/ 16 марта 2013

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

упс.

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

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

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

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

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

0 голосов
/ 19 октября 2010

Вы можете использовать небольшой 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...