Bazaprogram.ru

Новости из мира ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Ячейка таблицы ссылка css

html-таблица строка как ссылка

Я не могу установить строку таблицы как ссылку на что-то. Я могу использовать только css и html. Я пробовал разные вещи от div в строку что-то другое, но все равно не могу заставить его работать.

15 ответов:

у вас есть два способа сделать это:

С помощью javascript:

С помощью якоря:

Я сделал вторую работу, используя:

чтобы избавиться от мертвого пространства между колоннами:

вот простая демонстрация второго примера:демо

Я сделал себе пользовательскую функцию jquery:

jQuery

легкий и идеально подходит для меня. Надеюсь, это поможет вам.

(Я знаю, что OP хочет только CSS и HTML, но рассмотрим jQuery)

согласился с Мэттом Кантором, используя данные attr. Отредактированный ответ выше

если вы находитесь в браузере, который его поддерживает, Вы можете использовать CSS для преобразования в таблице строку:

конечно, вы ограничены тем, что не помещаете элементы блока внутрь . Вы также не можете смешивать это с обычным

обычный способ-назначить некоторый JavaScript для на TR элемент.

если вы не можете использовать JavaScript, то вы должны использовать хитрость:

добавить ту же ссылку на каждый TD той же строки (ссылка должна быть самым внешним элементом в ячейке).

превратить ссылки в элементы блока: a

последний заставит ссылку заполнить всю ячейку, поэтому нажмите в любом месте будет вызывать ссылку.

если вы обязательно используйте таблицу, вы можете поместить ссылку в каждую ячейку таблицы:

и сделать ссылки заполнить все ячейки:

если вы можете использовать

вот CSS, который идет с

вы не можете обернуть

элемент — тег, но вы можете выполнить аналогичную функциональность с помощью onclick событие для вызова функции. Пример найден здесь, что-то вроде этой функции:

и добавьте его к своей таблице следующим образом:

ответ сэр Уильям подходит мне лучше всего. Я улучшил Javascript с поддержкой горячей клавиши Ctrl + LeftClick (открывает страницу в новой вкладке). Событие ctrlKey используется ПК, metaKey по Mac.

Javascript

пример

Я знаю, что на этот вопрос уже дан ответ, но мне все еще не нравится какое-либо решение на этой странице. Для людей, которые используют JQuery я сделал окончательное решение, которое позволяет дать строку таблицы почти такое же поведение, как тег.

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

jQueryвы можете добавить это, например, в стандартный включенный файл javascript

HTMLтеперь вы можете использовать это на любом

элемент внутри вашего HTML

Это избавляет вас от необходимости дублировать ссылку в tr-просто выловите ее из первого a.

когда я хочу сымитировать

со ссылкой, но соблюдая стандарты html, я делаю это.

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

Надежда может помочь кому-то.

что-то в этом роде, возможно? Хотя он использует JS, но это единственный способ сделать строку (tr) кликабельной.

Если у вас нет одной ячейки с тегом привязки, который заполняет всю ячейку.

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

после прочтения этой темы и некоторых других я придумал следующее решение в javascript:

чтобы использовать его, поместите href в tr/td / th, который вы хотите быть кликабельным, например:

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

недостатком является то, что он не будет полностью заставлять TRs вести себя как ссылки, как с divs с display: table; , и они не будут клавиатуры-по выбору или текст статуса. Edit: я сделал клавиатурную навигацию, установив onkeydown, role и tabIndex, вы можете удалить эту часть, если нужна только мышь. Однако они не будут показывать URL-адрес в строке состояния при наведении курсора.

вы можете создать особый стиль ссылки TRs с помощью селектора CSS » tr[href]».

У меня есть другой способ. Особенно, если вам нужно отправить данные с помощью jQuery

Set variable устанавливает переменные в сеансах, которые страница, которую вы собираетесь читать и действовать.

Я люблю способ размещения прямо на месте окна, но я не думаю, что это возможно.

Спасибо за это. Вы можете изменить значок наведения, назначив класс CSS для строки, например:

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

Имеет место вот такой простейший код ссылки с текста в таблице:

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

По идее, для этого должен быть создан родительский блок размером с ячейку таблицы. Но как-то и это не сработало.

HTML5
07.06.2014, 18:44

Картинка на всю ширину ячейки таблицы
Как сделать картинку на всю ширину ячейки таблицы, что-то не выходит. пробую так, самое простое. .

Как растянуть картинку на всю ширину ячейки таблицы QTableView?
Есть кусок полоски, хотелось бы чтобы вся эта полоска была была по всей ширине ячейки таблицы.

Ссылка под размер ячейки таблицы
Здравствуйте. Есть таблица из двух столбцов и нескольких строк. картинки в левом столбце 40px в.

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

07.06.2014, 18:552
07.06.2014, 19:19 [ТС]3
07.06.2014, 19:254
07.06.2014, 19:28 [ТС]5

Нужно 100-процентное заполнение ячейки, высота которой не постоянна.

07.06.2014, 19:306
07.06.2014, 23:30 [ТС]7

Вроде бы, это уже есть:

HTML5
08.06.2014, 12:338

display: block; поменяй на display: inline-block;

08.06.2014, 13:019
08.06.2014, 13:0510
08.06.2014, 18:2711

Решение

Если в ячейки предусмотрено две ссылки, делайте высоту 50% соответственно.

HTML5

.

Внутри тега

располагаются ячейки таблицы, представленные тегами или . Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.

Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border. Но стоит обратить внимание на то, что если добавить рамку только к элементу

08.06.2014, 18:27
08.06.2014, 18:27

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

Сделать в ячейке таблицы поле ввода на всю ячейку при возможности менять высоту ячейки
Здравствуйте, учусь html и css и никак не получается сделать в ячейке таблицы поле ввода на всю.

Нужна ссылка не на всю VS, а только на VB
Здравствуйте,хочу перейти с 2010 бейсика на 2013 ,зашёл на оф сайт Майкрософт ,вроде нешёл что.

Почему ссылка растягивается на всю ширину?
Привет. Почему-то ссылка form_link растягивается на всю ширину и никак не хочет становиться.

Ссылка расходится на всю ширину в Chrome
Проблема заключается в том, что ссылка(Our Works) распространяется за свои границы, т.е я могу.

CSS: Оформление таблиц

Табличные данные — информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег , представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега и заканчивается закрывающим тегом

, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов

и

.

Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.

Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

  • separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
  • collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.

Попробовать »

Размер таблицы

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

Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height, задавая нужные размеры или самой таблице или ячейкам:

Выравнивание текста

По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.

CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align :

  • top: текст выравнивается по верхней границе ячейки
  • middle: выравнивает текст по центру (значение по умолчанию)
  • bottom: текст выравнивается по нижней границе ячейки

Попробовать »

Чередование фонового цвета строк таблицы

При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class, добавляя его к каждой второй строке таблицы:

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

Изменение фона строки при наведении курсора

Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.

Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:

Выравнивание таблицы по центру

Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе — за автоматическое выравнивание по центру:

Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:

Читать еще:  Delphi проверить существование файла
Ссылка на основную публикацию
Adblock
detector