Как жестко задать высоту ячейки css

Ячейка таблицы: высота и ширина

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

3 окт 2011 в 17:31
А у меня получилось. %) Не забываем про магические 4 пробела
3 окт 2011 в 17:51
3 окт 2011 в 18:25
вот вам пожалуйста, 4 пробела ровно, результат виден.
3 окт 2011 в 18:26
В каментах они глючат, ибо текст сперва тримится, как я понял, потом обрабатывается 123
3 окт 2011 в 18:30

если точнее 4 варианта))
но сначало: width — ширина(указывается в пикселах или %) height — высота(указывается так же) 1)

бла бла бла

бла бла бла

style.css - td.name

td.name бла бла бла

вроде все варианты)))

Отслеживать
ответ дан 3 окт 2011 в 18:32
764 4 4 серебряных знака 20 20 бронзовых знаков
width=»100px» работать не будет. либо целое ( width=»N» ), либо проценты ( width=»N%» )
3 окт 2011 в 18:34
мнда, действительно, голова щас жестоко забита пхп, никак не могу один креатив заставить работать:)
3 окт 2011 в 19:03

text

Отслеживать
ответ дан 3 окт 2011 в 18:32
14.3k 1 1 золотой знак 21 21 серебряный знак 35 35 бронзовых знаков

Я не хочу спорить. Смахивает на совок: жить стало легче, жить стало веселей. Все отлично, багов нет? вопросов нет.

3 окт 2011 в 18:40

Я ж как бы не спорю, что баги есть, поддержу любое начинание в их репортинге и хантинге) Просто если что-то сделано, скажем, не идеально, это не значит, что дело в самой идее.

3 окт 2011 в 18:48

как видно ключевое свойство display:block, для ячейки размер которой должен быть независимым от общей высоты и ширины столбца или строки.

Отслеживать
ответ дан 4 окт 2011 в 5:51
850 5 5 серебряных знаков 13 13 бронзовых знаков

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

height

CSS атрибут height позволят обозначать высоту элемента. По умолчанию, свойство определяет высоту внутренней области. Если box-sizing имеет значение border-box , то свойство будет определять высоту области рамки.

Интерактивный пример

Атрибуты min-height и max-height при добавлении меняют значение height .

Синтаксис

/* Значения-ключевые слова */ height: auto; /* значения */ height: 120px; height: 10em; /* значения */ height: 75%; /* Глобальные значения */ height: inherit; height: initial; height: unset;

Значения

Высота — фиксированная величина.

Высота в процентах — размер относительно высоты родительского блока.

Браузер рассчитает и выберет высоту для указанного элемента.

Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.

Внутренняя максимальная предпочтительная высота.

Внутренняя минимальная предпочтительная высота.

Высота содержащего блока минус вертикальные margin , border и padding .

внутренняя минимальная высота
меньшая из внутренней предпочтительной высоты и доступной высоты

Формальный синтаксис

height =
auto | (en-US)
(en-US) | (en-US)
min-content | (en-US)
max-content | (en-US)
fit-content( (en-US) )

=
| (en-US)

Пример

HTML

div id="taller">Я 50 пикселей в высоту.div> div id="shorter">Я 25 пикселей в высоту.div> div id="parent"> div id="child">Моя высота - половина от высоты родителя.div> div>

CSS

div  width: 250px; margin-bottom: 5px; border: 2px solid blue; > #taller  height: 50px; > #shorter  height: 25px; > #parent  height: 100px; > #child  height: 50%; width: 75%; >

Результат

Проблемы доступности

Убедитесь, что элементы с height не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.

MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

Спецификации

Specification
CSS Box Sizing Module Level 3 # preferred-size-properties
CSS Box Sizing Module Level 4 # sizing-values

Начальное значение	auto
Применяется к	все элементы, кроме незаменяемых строчных элементов, табличных колонок и групп колонок
Наследуется	нет
Проценты	Процент для генерируемого блока рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не задана явно (т.е. зависит от высоты содержимого), и этот этот элемент позиционирован не абсолютно, значение будет auto . Процентная высота на корневом элементе относительна первоначальному блоку.
Обработка значения	процент, auto или абсолютная длина
Animation type	длина, проценты или calc();

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Блочная модель, width , box-sizing , min-height , max-height

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Почему высота ячейки в таблице внезапно увеличилась?

Делаю игру на javascript. Все уже готово, но возникла проблема с CSS. Картинка, помещенная в ячейку таблицы, почему-то увеличивает высоту этой ячейки на 3px. Размеры вроде бы заданы корректно, в чем дело? Пример:

* < margin: 0; padding: 0; >table < border-spacing:0; border-collapse: collapse; >td < width:20px; height:20px; border: 1px solid black; text-align:center; vertical-align:middle; >img

Отслеживать
задан 19 мая 2013 в 12:41
1,664 5 5 золотых знаков 30 30 серебряных знаков 68 68 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Пропиши для img display:block;

зы. по умолчанию img отображается как display:inline-block

Отслеживать
ответ дан 19 мая 2013 в 13:06
CyberPulse CyberPulse
26 5 5 бронзовых знаков

Действительно, не знал. Спасибо. Все равно не понял, пусть даже inline-block, откуда берутся лишние пиксели?

19 мая 2013 в 13:12

display:inline-block получает этот отступ из-за размера шрифта, в твоем случает, если прописать для td font-size:0, то отсуп тоже уйдет

19 мая 2013 в 13:18

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.