Высота строки таблицы html: Атрибут height | htmlbook.ru — Вебджем.рф

Содержание

HTML/Атрибут height (Элемент td)

Синтаксис

(X)HTML

<td height="[значение]"> ... </td>

Описание

Атрибут / параметр height (от англ. «height» ‒ «высота») указывает рекомендуемую высоту ячейки.

Примечание

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

CSS

Аналог: height: <значение>;

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.	Раздел
HTML
2.0	—
3.2	Tables
4.01	11.2.6 Table cells: The TH and TD elements height = length [CN]…^[1] DTD: `Transitional Strict Frameset`
5.0	~~4.9.9 The td element~~
5.1	~~4.9.9. The td element~~
XHTML
1.0	Extensible HyperText Markup Language^[1] DTD: `Transitional Strict Frameset`
1. 1	~~Extensible HyperText Markup Language~~

[1] ‒ помечен как «устаревший».

Значения

В качестве значения указывается высота ячейки. Значение высоты ячейки может быть выражено в виде:

<число>: Если в качестве значения указывается только число, то высота ячейки таблицы рассчитывается в пикселях. (Например, «height="35"».)
<процент>%: Если в качестве значения указывается число со «%» ЗНАКОМ ПРОЦЕНТА [U+0025], то высота ячейки таблицы рассчитывается в процентах на основе доступного вертикального пространства. (Например, «height="32%"».)

Пример использования

Листинг кода

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Параметр height (Элемент td)</title>
</head>
<body>
<h2>Пример использования атрибута «height»</h2>
<table border=»1″>
<caption>Математическая матрица</caption>
<tbody align=»center»>
<tr> <td>0</td> <td>2</td> <td>6</td> <td>3</td> </tr>
<tr> <td>1</td> <td>0</td> <td>4</td> <td>2</td> </tr>
<tr> <td>2</td> <td>2</td> <td>0</td> <td>3</td> </tr>

Параметр height (Элемент td)

Свойство line-height, высота строки — Оформление текста — HTML Academy

Загрузка…
Через несколько секунд всё будет готово

index. html
style.css

HTML

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Сайт начинающего верстальщика</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <header> <h2>Сайт начинающего верстальщика</h2> </header> <main> <img src=»img/raccoon.svg» alt=»Аватарка»> <nav> <h3>Записи в блоге</h3> <ul> <li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li> <li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li> <li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li> <li><a href=»day-4.html»>День четвёртый. Как я чуть не заболел</a></li> <li><a href=»day-5.

html»>День пятый. Отдыхаю</a></li> <li><a href=»day-6.html»>День шестой. Как я ничего не понял, продолжение</a></li> <li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li> <li><a href=»day-8.html»>День восьмой. Очень серьёзный</a></li> <li><a href=»day-9.html»>День девятый. Точнее ночь</a></li> <li><a href=»day-10.html»>День десятый. Подведение итогов</a></li> <li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li> <li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li> <li><a href=»day-13.html»>День тринадцатый. Нашёл статью</a></li> <li><a href=»day-14.html»>День четырнадцатый. Новый формат</a></li> <li><a href=»day-15.

html»>День пятнадцатый. Галерея селфи</a></li> </ul> </nav> <section> <p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>тренажёры по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p> <p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p> </section> <section> <h3>Навыки</h3> <dl> <dt>HTML</dt> <dd><div>60%</div></dd> <dt>CSS</dt> <dd><div>20%</div></dd> <dt>JS</dt> <dd><div>10%</div></dd> </dl> </section> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: «Arial», sans-serif; color: #222222; background: #ffffff url(«img/bg-page.

png») no-repeat top center; } h2 { font-size: 24px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .page-title { font-size: 36px; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h3 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

Что в задании вам не понравилось?

Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)

Другое (сейчас напишу)

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

ЗадачиВыполнено

Заголовку h2 добавьте в разметке класс page-title,
затем уберите у h2 заданную высоту строки line-height: normal,
а потом задайте для класса .page-title высоту строки со значением 42px.

html — Настройка высоты строки таблицы

спросил

11 лет, 10 месяцев назад

Изменено 6 месяцев назад

Просмотрено 550 тысяч раз

У меня есть этот код:

 <таблица>
    
        Тест
        1.0
        абв
    
    
        тест2
        1. 3
        защита

Ряды расположены слишком далеко друг от друга. Я хочу, чтобы линии были ближе друг к другу.

Что я сделал, так это добавил следующий CSS, но, похоже, это ничего не изменило.

 .topics тр { высота: 14 пикселей; }

Что я делаю не так?

HTML
CSS

попробуйте это:

.topics tr { line-height: 14px; }

попробуйте установить атрибут для td так:

 .topic td{высота: 14px};

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

 .topics tr {
    переполнение: скрыто;
    высота: 14 пикселей;
    пробел: nowrap;
}

Пробел : nowrap важен, так как он предотвращает разрыв ячеек вашей строки на несколько строк.

Лично я хотел бы добавить text-overflow: многоточие к моим элементам th и td , чтобы переполняющий текст выглядел лучше, добавив завершающие точки, например, Too long получает точки...

Вы можете удалить дополнительный интервал как хорошо, если вы поместите границы коллапса: коллапс; Оператор CSS на вашем столе.

Лично я решил использовать отступы. Это не совсем то, что вам нужно, но может быть полезно в некоторых случаях.

 таблица тд {
    отступ: 15px 0;
}

line-height работает, только если она больше текущей высоты содержимого . Итак, если у вас есть значок 50×50 в таблице, высота строки tr не сделает строку меньше 50 пикселей (+ отступ).

Поскольку вы уже установили отступы на 0 , это должно быть что-то другое,
, например, большой размер шрифта внутри td , который больше ваших 14 пикселей.

Если вы используете Bootstrap, посмотрите на padding вашего тд с.

Следующее расширит/свернет строку таблицы (tr) с учетом того, что у вас есть несколько таблиц, следовательно, вам понадобятся некоторые второстепенные js. Очень мало кодирования IMO

 function row_expand_collapse(e){
  // получить идентификатор таблицы, чтобы вы знали, из какой таблицы манипулировать строкой
  const tableID = e.parentNode.parentNode.id;
  // получаем индекс строки и увеличиваем его на 1, чтобы вы знали, какую строку расширять/сворачивать
  const i = e.rowIndex + 1;
  // получить строку для изменения класса css
  пусть строка = документ.getElementById(tableID).rows[i]
  // Добавляем и удаляем соответствующее имя класса css, чтобы развернуть/свернуть строку
  если (row.classList.contains('row-collapse')){
    row.classList.remove('row-collapse')
    row.classList.add('row-expand')
    возвращаться
  }
  если (row.classList.contains('row-expand')){
    row. classList.remove («строка-расширение»)
    row.classList.add('row-collapse')
    возвращаться
  }
}

 .row-collapse td{
  отступ: 0px 0px;
  высота строки: 0px;
  пробел: nowrap;
  переполнение: скрыто;
  продолжительность перехода: 0,75 с;
}
.row-expand тд {
  высота строки: 100%;
  продолжительность перехода: 0,75 с;
}
стол, й, тд{
  ширина: 75%;
  граница: 1px сплошной черный;
  граница коллапса: коллапс;
  отступ: 15px 15px;
  поля: 15px 15px;
  выравнивание текста: по центру;
}

 <таблица>
                
                    
                        ТАБЛИЦА 1
                    
                
                
                    
                        Строка 1 — Нажмите на меня, чтобы увидеть строку 2
                    
                    
                        Ряд 2
                    
                    
                        Строка 3 — Нажмите на меня, чтобы увидеть строку 4
                    
                    
                        Ряд 4
                    
                
            
            
            <таблица>
                
                    
                        ТАБЛИЦА 2
                    
                
                
                    
                        Строка 1 — Нажмите на меня, чтобы увидеть строку 2
                    
                    
                        Ряд 2
                    
                    
                        Строка 3 — Нажмите на меня, чтобы увидеть строку 4
                    
                    
                        Ряд 4

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

 xxxyyyzzz

Похоже высота ряд зависит от высота тд . Таким образом, мы можем поместить некоторые div и установить height для этого div , чтобы исправить height row .

Пример:

 td.table-column > div.item {
  высота: 20 пикселей;
  переполнение: скрыто;
  цвет фона: светло-розовый;
}

 <таблица>
    
      <тд>
          Это очень длинный текст 1 2 3 4 5 6 7 8
      
      <тд>
          Это очень длинный текст 1 2 3 4 5 6 7 8
      
      <тд>
          Это очень длинный текст 1 2 3 4 5 6 7 8
      
      <тд>
          Это очень длинный текст 1 2 3 4 5 6 7 8

Вы можете попробовать это..

 {
   высота строки: 15 пикселей; //или
   высота: 15 пикселей; //или
   отступ: 5px 5px;
}

у меня сработало..

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Как исправить высоту TR?

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

Изменяя размер ячеек, мы можем контролировать высоту строки.

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

 таблица {
  ширина: 100%;
}
тд {
  граница: 1px сплошная #999;
}
.set-height тд {
  положение: родственник;
  переполнение: скрыто;
  высота: 3см;
}
.set-высота р {
  положение: абсолютное;
  маржа: 0;
  сверху: 0;
}
/* исправлен макет таблицы */
.layout-фиксированный {
  макет таблицы: фиксированный;
}
/* ширина td */
.td-width td:first-child {
  ширина: 33%;
}

<таблица><тело>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

ФуБарБазКукс Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

С применением

table-layout: fixed: <таблица>

С помощью

<td> ширина применяется: <таблица>

Свойство table-layout

Во второй таблице в приведенном выше фрагменте применяется table-layout: fixed , что приводит к тому, что ячейкам присваивается одинаковая ширина, независимо от их содержимого, внутри родителя.

Согласно caniuse.com, по состоянию на 12 сентября 2019 г. не было серьезных проблем с совместимостью в отношении использования макета таблицы .

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

Эти методы позволяют ячейке, содержащей фактически безразмерное содержимое, созданное путем применения position: absolute , придать некоторый произвольный обхват.

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

 таблица {
  ширина: 100%;
}
тд {
  граница: 1px сплошная #999;
}
стол р {
  маржа: 0;
}
.cap-высота р {
  максимальная высота: 3em;
  переполнение: скрыто;
}

 <таблица><тело>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.

Высота строки таблицы html: Атрибут height | htmlbook.ru

HTML/Атрибут height (Элемент td)

Синтаксис

Описание

Примечание

CSS

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

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

Значения

Пример использования

Свойство line-height, высота строки — Оформление текста — HTML Academy

html — Настройка высоты строки таблицы

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

html — Как исправить высоту TR?

С применением

С помощью

Добавить комментарий Отменить ответ

Рубрики