Тег TD, атрибут height

Как установить минимальную высоту на столе

Как видите, первый tr/td должен иметь высоту 60px ( min-height:60px ), но на самом деле это не так.

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

Итак, как я могу взять всю высоту на минимальной высоте td?

Также пробовал ставить min-height:60px; на тр, но ничего не меняется.

Что произойдет, если вы поместите div внутри td и установите на нем минимальную высоту? — Murray McDonald

Я не могу! Outlook стереть div . Мне нужен стол. — markzzz

13 ответы

В CSS 2.1 влияние min-width и max-width на таблицы, встроенные таблицы, ячейки таблицы, столбцы таблицы и группы столбцов не определено.

Я могу только предположить, что это относится к td и tr так же.

Что всегда должно работать, так это обертывание содержимого в div и применение min-height тому, как показано на этот JSFiddle:

   
This is my text that I need in 2 lines
  

Редактировать: Вы говорите, что это не работает с Outlook.

Альтернативная идея: поместите изображение высотой 60 пикселей в td , и сделай это float: left :

@markzzz, тогда я не думаю, что ты сможешь это сделать, за исключением того, что ты можешь попробовать

вместо. Иначе я думаю height единственный путь — Пекка

Действительно? Черт, мне нужно это сделать. 🙁 Не могу использовать высоту.

получить минимальную высоту? — Маркззз

@markzzz, ты можешь попробовать

но есть вероятность, что Outlook и это испортит, если сломается с . — Пекка

Пробовал на , и да они еще и порезаны! Пример изображения выглядит великолепно, но слишком сложно! Кроме того, я уверен, что float:left обрезано. так что это не сработает.. 🙁 — Маркззз

css меня не разочаровал, это то, что я ожидал от css. пытка — Мухаммад Умер

Используйте не высота CSS или минимальная высота

Для электронной почты в формате HTML установите ячейку таблицы как и он будет рассматривать это как минимальную высоту. Если ваш контент больше 60 пикселей, он соответственно расширится.

Не только на почту, но и на все таблицы, и в css тоже — IG Pascual

Это должен быть правильный ответ, чтобы он работал в Outlook/электронной почте — Deshg

Бум! Прекрасно работает. height это новый min-height для столов. 🙂 — Джошуа Пинтер

Это устраняет мои проблемы с несоответствием высоты в Outlook 2013! 🙂 — tom_mai78101

Источник

Атрибут height

Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании атрибута height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот атрибут будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.

Синтаксис

Значения

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

Высота вычисляется на основе содержимого ячейки.

Аналог CSS

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного .

       
 
Ячейка 1
 
 
  

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

Как установить высоту для строк таблицы?

Подскажите как установить высоту для содержимого таблицы, чтобы не было простыни текста как в коде. Структура приходит динамично , но статична только таблица , ну то есть table->tbody->tr->td
И нужно чтобы была макс высота у ячеек на случай если текста много. В результате должна быть таблица с одинаковыми по высоте ячейками

Простой 16 комментариев

Задайте размеры span’у и нужный overflow.
Но это не точно.
Потому что формулировка «чтобы не было простыни текста» не однозначна и самый напрашивающийся не имеющий отношения к высоте ответ: удалите эту простыню.

overflow-y:scroll;
ты для начала сформулируй что ты хочешь получить на выходе
тут не экстрасенсы сидят

Излишки текста-то куда деваться должны?
Скрываться или ширина таблицы должна увеличиваться (т.е. горизонтальная прокрутка у body или оборачивающего блока) или еще как-нибудь.

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

Альтернатива: обрезать текст js’ом или сразу на бэке.

У тебя таблица такая.

Как ты хочешь ей высоту задать, у тебя и так все ячейки одной высоты? Давай примеры.

irishmann,

Примерно вот такое хочу увидеть.

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

И у меня проблема в первой части этой формулировки, я не могу ужать ячейки таблиц. Ну то есть таких tr может быть страниц на 100 и получается огромная простыня в случае если текста много приходит.

И я надеялся что всё же можно ужать tr или td по высоте чтобы они были фиксированной не такой огромной высоты как на скрине что ты прислал.

Ну и ещё момент что я не вижу содержимое структуры таблицы. То есть где-то есть span где то его нет. Стили могу задать только для таблицы , ячеек и tr

Источник

HTML Table Sizes

HTML tables can have different sizes for each column, row or the entire table.

Use the style attribute with the width or height properties to specify the size of a table, row or column.

HTML Table Width

Example

Set the width of the table to 100%:

Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the element.

HTML Table Column Width

Example

Set the width of the first column to 70%:

HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row element:

Example

Set the height of the second row to 200 pixels:

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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

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

Используйте атрибут style с свойствами width и height для указания размера таблицы, строки или столбца.

Ширина таблицы

Пример

Установите ширину таблицы равной 100%:

Примечание: Использование процента в качестве единицы измерения ширины означает, насколько широким будет этот элемент по сравнению с его родительским элементом, которым в данном случае является элемент .

Ширина столбца таблицы

Пример

Установите ширину первого столбца равной 70%:

Высота строки таблицы

Чтобы задать высоту определенной строки, добавьте атрибут style к элементу строки таблицы:

Пример

Установите высоту второй строки равной 200 пикселям:

HTML Упражнения

Мы только что запустили
SchoolsW3 видео

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник