Ячейка таблицы как ссылка!
не центруется ячейка таблицы
Приветствую. Делаю таблицу с иконками, и последнии никак не центруются по вертикали. подскажите.
Класс, ячейка таблицы
Добрый день, помогите пожалуйста реализовать код для определенной ячейки в класс. То-есть уже есть.
backgroung в ячейке таблицы как ссылка
<table border="0" cellpadding="0" cellspacing="0" height="195" width="100%".
Ссылка в ячейке таблицы
Имеется вот такая таблица <table width="100%" height="100%"> <tr> <td.
Как сделать ячейку таблицы ссылкой?
Саму ячейку таблицы нельзя непосредственно сделать ссылкой, но допустимо вложить элемент <a> внутрь <td> и сделать ссылку блочной. В этом случае ссылка будет занимать всю доступную ширину, как показано в примере 1. Красный цвет фона у ссылки выбран для наглядности, чтобы была видна область ссылки.
Пример 1. Блочная ссылка
Результат данного примера показан на рис. 1.
Рис. 1. Ссылка в ячейке
Использование position
Как видно, если высота ячеек различается, то ссылка занимает не всю ячейку целиком — ссылка отстаёт от границ на величину padding у td , а высота ссылки равна высоте текста. Чтобы обойти эти ограничения, ячейку надо сделать с относительным позиционированием, а ссылку внутри неё — с абсолютным позиционированием. Размеры ссылки при этом задаются с помощью свойств left , right , top и bottom с нулевым значением — тогда ссылка будет занимать всю область ячейки целиком.
К сожалению, есть и ограничения — ячейка с абсолютно позиционированной ссылкой «схлопывается». Есть два решения:
- задать всей таблице свойство table-layout со значением fixed — ширина всех ячеек при этом станет одинаковой;
- явно установить ширину ячейки со ссылкой через свойство width.
В примере 2 показано добавление table-layout .
Пример 2. Использование position
Результат данного примера показан на рис. 2.
Рис. 2. Ссылка в ячейке
Данное решение не работает в браузере Internet Explorer, в нём высота ссылки не равна высоте ячейки. Если нужна поддержка IE, то есть следующее решение, работающее и в других браузерах. Сперва вставляем ссылку в <div> .
Затем в стилях дописываем следующие строки.
Использование JavaScript
Можно вообще отказаться от явных ссылок и воспользоваться событием onclick, добавляя его к нужному элементу <td> . Тогда вся ячейка будет реагировать на щелчок.
Внутри onclick пишем document.location , а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.
Пример 3. Использование события onclick
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ячейка как ссылка</title> <style> table td td:first-child </style> </head> <body> <table> <tr> <td onclick="document.location=’page/new.html’">Ссылка</td> <td>Если для простоты пренебречь потерями на теплопроводность, то видно, что волновая тень синхронизирует кварк без обмена зарядами или спинами.</td> </tr> </table> </body> </html>
Поскольку ячейка с onclick не является привычной ссылкой, её нельзя самостоятельно открыть в новой вкладке и вообще понять что это ссылка. Для наглядности через стили меняем вид указателя на «руку».
html-таблица строка как ссылка
Я не могу установить строку таблицы как ссылку на что-то. Я могу использовать только css и html. Я пробовал разные вещи от div в строку что-то другое, но все равно не могу заставить его работать.
15 ответов:
-
С помощью javascript:
<tr onclick=»document.location = ‘links.html’;»>
-
С помощью якоря:
<tr><td><a href=»»>text</a></td><td><a href=»»>text</a></td></tr>
Я сделал себе пользовательскую функцию jquery:
jQuery
легкий и идеально подходит для меня. Надеюсь, это поможет вам.
(Я знаю, что OP хочет только CSS и HTML, но рассмотрим jQuery)
согласился с Мэттом Кантором, используя данные attr. Отредактированный ответ выше
если вы находитесь в браузере, который его поддерживает, Вы можете использовать CSS для преобразования <a> в таблице строку:
конечно, вы ограничены тем, что не помещаете элементы блока внутрь <a> . Вы также не можете смешивать это с обычным <table>
-
добавить ту же ссылку на каждый TD той же строки (ссылка должна быть самым внешним элементом в ячейке).
-
превратить ссылки в элементы блока: a
если вы обязательно используйте таблицу, вы можете поместить ссылку в каждую ячейку таблицы:
и сделать ссылки заполнить все ячейки:
если вы можете использовать <div> s вместо таблицы, ваш HTML может быть намного проще, и вы не получите «пробелы» в ссылках, между ячейками таблицы:
вот CSS, который идет с <div> способ:
вы не можете обернуть <td> элемент <a> — тег, но вы можете выполнить аналогичную функциональность с помощью onclick событие для вызова функции. Пример найден здесь, что-то вроде этой функции:
и добавьте его к своей таблице следующим образом:
ответ сэр Уильям подходит мне лучше всего. Я улучшил Javascript с поддержкой горячей клавиши Ctrl + LeftClick (открывает страницу в новой вкладке). Событие ctrlKey используется ПК, metaKey по Mac.
Javascript
пример
http://jsfiddle.net/vlastislavnovak/oaqo2kgs/
Я знаю, что на этот вопрос уже дан ответ, но мне все еще не нравится какое-либо решение на этой странице. Для людей, которые используют JQuery я сделал окончательное решение, которое позволяет дать строку таблицы почти такое же поведение, как <a> тег.
Это мое решение:
jQueryвы можете добавить это, например, в стандартный включенный файл javascript
HTMLтеперь вы можете использовать это на любом <tr> элемент внутри вашего HTML
Это избавляет вас от необходимости дублировать ссылку в tr-просто выловите ее из первого a.
когда я хочу сымитировать <tr> со ссылкой, но соблюдая стандарты html, я делаю это.
HTML:
CSS:
таким образом, когда кто-то идет с его мышью на TR, все строки (и это ссылки) получает стиль наведения, и он не может видеть, что есть несколько ссылок.
Надежда может помочь кому-то.
Скрипка здесь
что-то в этом роде, возможно? Хотя он использует JS, но это единственный способ сделать строку (tr) кликабельной.
Если у вас нет одной ячейки с тегом привязки, который заполняет всю ячейку.
и затем, вы не должны использовать таблицу в любом случае.
после прочтения этой темы и некоторых других я придумал следующее решение в javascript:
чтобы использовать его, поместите href в tr/td / th, который вы хотите быть кликабельным, например: <tr href=»http://stackoverflow.com»> . И убедитесь, что приведенный выше скрипт выполняется после создания элемента tr (путем его размещения или с помощью обработчиков событий).
недостатком является то, что он не будет полностью заставлять TRs вести себя как ссылки, как с divs с display: table; , и они не будут клавиатуры-по выбору или текст статуса.Edit: я сделал клавиатурную навигацию, установив onkeydown, role и tabIndex, вы можете удалить эту часть, если нужна только мышь. Однако они не будут показывать URL-адрес в строке состояния при наведении курсора.вы можете создать особый стиль ссылки TRs с помощью селектора CSS » tr[href]».
У меня есть другой способ. Особенно, если вам нужно отправить данные с помощью jQuery
Set variable устанавливает переменные в сеансах, которые страница, которую вы собираетесь читать и действовать.
Я люблю способ размещения прямо на месте окна, но я не думаю, что это возможно.
Спасибо за это. Вы можете изменить значок наведения, назначив класс CSS для строки, например:
и CSS выглядит так:
можете ли вы добавить тег A в строку?
это то, что ты просишь?
Ссылка — ячейка таблицы??
Меня заинтересовал один момент. Пример, по этой ссылке — http://evapco.ro/index.php. Как в нижнем фрейме сделан перечень товаров? Я так понимаю, это таблица. Но вот подобрать код пока не получается, чтобы добится такого же эффекта. Как можно сделать кажду ячейку отдельной ссылкой?
У меня получается сделать ссылкой в ячейке, либо текст, либо картинку, либо наоборот пустое поле(без текста и картинки). А как его сделать так, как здесь? Чтобы вся ячейка была ссылкой, еще и подсвечивалась при наведении курсора? Надеюсь, я нормально обьянил, в чем проблема, и вы меня поймете=)