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

Синтаксис

(X)HTML

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

Описание

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

Примечание

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

CSS

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

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.
Раздел
HTML
2.0—
3.2Tables
4.0111.2.6 Table cells: The TH and TD elements
height = length [CN]…[1]
DTD: Transitional Strict Frameset
5.04.9.9 The td element
5.14.9.9. The td element
XHTML
1.0Extensible HyperText Markup Language[1]
DTD: Transitional Strict Frameset
1. 1Extensible 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>
<tr> <td>3</td> <td>2</td> <td>6</td> <td>0</td> </tr>
</tbody>
</table>
</body>
</html>

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

html — Как заполнить ячейку таблицы на всю высоту?

Задать вопрос

Вопрос задан

Изменён 2 года 8 месяцев назад

Просмотрен 399 раз

Подскажите как эту строку <tr><td>Строка 1</td></tr> растянуть на всю высоту?

Очень важно! фиксированная высота только у блока . container и table tr:nth-child(2) td все остальное должно быть динамическое

.container {
  width: 200px;
  height: 100px; /* только этот размер может меняться */
  border: 1px solid #000;
}
table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  border: 1px solid #f00;
}
table td {
  border: 1px solid #f00;
}
table tr:nth-child(2) td {
  height: 30px;
}
<div>
  <div>Заголовок</div>
  <div>
    <table>
      <tr><td>Строка 1</td></tr>
      <tr><td>Строка 2</td></tr>
    </table>
  </div>
</div>

Вкратце, хочу получить такой эффект

  • html
  • css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
  width: 200px;
  height: 300px; /* только этот размер может меняться */
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
}
table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  border: 1px solid #f00;
  position: relative;
}
.
 
 content {
  height: 100%;
}
table td {
  border: 1px solid #f00;
}
table tr:first-child  {
  height: 100%;
}
table tr:nth-child(2) td {
  height: 30px;
}
<div>
  <div>Заголовок</div>
  <div>
    <table>
      <tr><td>Строка 1</td></tr>
      <tr><td>Строка 2</td></tr>
    </table>
  </div>
</div>
2

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

спросил

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

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

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

 <таблица>
    
        Тест
        1. 0
        абв
 

    
    
        тест2
        1.3
        защита

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

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

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

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

  • HTML
  • CSS
1

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

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

3

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

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

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

 .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
1

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

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

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

1

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

Зарегистрируйтесь с помощью 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: 
<таблица>
  
    
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.
  

 
С помощью 
<td> ширина применяется: 
<таблица>
  
    
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

Во второй таблице в приведенном выше фрагменте применяется 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.
No related posts.