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

@vlad-55 · Регистрация: 21.02.2009

Студворк — интернет-сервис помощи студентам

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table border="1" width="100%" style="border-collapse: collapse">
    <tr>
        <td bgcolor="#00FFFF">
        <p>Левый</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        </td>
        <td bgcolor="#FFFF99" >
       
<a href="#" style="width:100%; display:block; height:100%; background-color: #F9C;"> Строка 1<br>Строка 2</a>       
        
        </td>
    </tr>
</table>

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

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

@kvant355 · 07.06.2014, 18:55

установите padding для тега <a>

@vlad-55 · 07.06.2014, 19:19 **[ТС]**

О каком значении padding идет речь?

@kvant355 · 07.06.2014, 19:25

CSS
1
2
3
a {
  padding: 40px 0 40px 0;
}

@vlad-55 · 07.06.2014, 19:28 **[ТС]**

Нет, это не то!

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

@maximus2011 · 07.06.2014, 19:30

CSS
1
2
3
a{
    display:block;
}

@vlad-55 · 07.06.2014, 23:30 **[ТС]**

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

HTML5
1
<a href="#" style="width:100%; display:block; height:100%; background-color: #F9C;"> Строка 1<br>Строка 2</a>

Или Вы имеете в виду что-то другое?

@svarlos · 08.06.2014, 12:33

в это строке <a href="#" style="width:100%; display:block; height:100%; background-color: #F9C;"> Строка 1<br>Строка 2</a>

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

@maximus2011 · 08.06.2014, 13:01

так а зачем высоту и ширину то указывать в процентах? И у вас же 2 ссылки в одной ячейки, надо их в отдельные ячейки засунуть, и если вы добавите display: inline-block; ссылки пойдут друг за другом в ряд

@svarlos · 08.06.2014, 13:05

Ну по видимому, что бы она "резиновая" была! Вроде очевидно.

@Academik · 08.06.2014, 18:27

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

HTML5
1
2
3
4
5
<table>
    <tr>
        <td><a href="#">Ссылка</a></td>
    </tr>
</table>

CSS
1
2
3
table{width: 100%;}
table td{height: 100px;}
table td a{display: block; height: 100%; background: red;}

http://jsfiddle.net/wXdcq/1/

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	07.06.2014, 18:55
	установите padding для тега <a> 0

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787
	07.06.2014, 19:19 [ТС]
	О каком значении padding идет речь? 0

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787
	07.06.2014, 19:28 [ТС]
	Нет, это не то! Нужно 100-процентное заполнение ячейки, высота которой не постоянна. 0

@svarlos 0 / 0 / 0 Регистрация: 08.06.2014 Сообщений: 6
	08.06.2014, 12:33
	в это строке <a href="#" style="width:100%; display:block; height:100%; background-color: #F9C;"> Строка 1<br>Строка 2</a> display: block; поменяй на display: inline-block; 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	08.06.2014, 13:01
	так а зачем высоту и ширину то указывать в процентах? И у вас же 2 ссылки в одной ячейки, надо их в отдельные ячейки засунуть, и если вы добавите display: inline-block; ссылки пойдут друг за другом в ряд 0

@svarlos 0 / 0 / 0 Регистрация: 08.06.2014 Сообщений: 6
	08.06.2014, 13:05
	Ну по видимому, что бы она "резиновая" была! Вроде очевидно. 0

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

Решение