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

Leave a Comment / Html / By /

Атрибут height | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+1.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

<td>...</td>

Значения

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

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

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

Аналог CSS

height

Валидация

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

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут height</title>
 </head>
 <body>

  <table cellpadding="10" bgcolor="#ffcc00" align="center">
   <tr>
    <td>Ячейка 1</td>
   </tr> 
  </table> 

 </body>
</html>

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

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; }

html — Фиксированная высота строки таблицы в HTML

У меня есть таблица размещенной в делах. Ни стола, ни хостинг DIV имеет высоту, указанную. После строки заголовка таблицы, каждая последующая строка выглядит следующим образом:

<tr class=movie-info-row>
    <td>
        <div class=movie-cover>
            <img class=movie-image src= />
            <a class=movie-link href= target=_blank>IMDb</a>
        </div>
    </td>
    <td colspan=5>
        <div class=movie-details>
            <p class=movie-file></p>
            <div class=movie-div-left>
                <p class=movie-category></p>
                <p class=movie-director></p>
                <p class=movie-insertdate></p>
            </div>
            <div class=movie-description-container>
                <p class=movie-description></p>
            </div>
        </div>
    </td>
</tr>

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

Мой CSS (в менее синтаксис) выглядит следующим образом:

.movie-info-row {
    height: 240px;

    p {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    td {
        height: 100%;
        overflow: hidden;
    }
}

.movie-cover {
    border: 1px solid black;
    width: 130px;
    height: 100%;
    overflow: hidden;
}

.movie-details {
    border: 1px solid black;
    height: 100%;
    overflow: hidden;
}

.movie-file {
    font-size:larger;
}

.movie-div-left {
    float: left;
    width: 40%;
    vertical-align: top;
    display: inline-block;
}

.movie-description-container {
    display: inline-block;
    float: right;
    width: 60%;
    overflow: hidden;
    vertical-align: top;
}

.movie-description {
    overflow: hidden;
}

Как вы можете видеть , я установил высоту строки до 240 пикселей и для хорошей меры есть каждая tdвысота установлена на 100% с переливом скрытым. Производитель проблемы является текстовым описанием, которое может быть довольно долго , и это портит с высотой строки таблицы. Как вы можете видеть , что я поставил переполнение скрытый во многих местах (что, вероятно , избыточно). Примечание: Это не является специфичным браузером. Я даже не использую IE. Я проверяю его с Firefox и хромом (оба последних версий).

Я действительно в недоумении. Что я делаю не так? Любая помощь будет принята с благодарностью.

ETA: Вот картина строки таблицы , как это выглядит сейчас: SampleRow

Как вы можете видеть, текстовое описание имеет высоту строки с ней. Я хочу, чтобы она ограничена фиксированной высоте — в основном в Hight заглавного изображения. И да, я хочу всю информацию (с более прийти) там. Так что это не подлежит обсуждению.

HTML высота строки таблицы — CodeRoad

HTML & CSS вопрос:

Я пытаюсь ограничить строку таблицы только одной строкой (высота 5 мм, длина 30 мм). Но он должен оставаться такого размера, даже если он не вписывается в это пространство (потому что иначе я получаю проблемы с размером градиентного фонового изображения, выглядящим ужасно).

Как я могу это сделать?

//GRS/Standorte/G08 Цюрих Schindlerstrasse/Standortdaten/Gebäudedaten/E01/Trakt 2/Sicherheitsdokumentationen/*.* Азбука asp.net html css

Поделиться Источник Stefan Steiger     02 декабря 2009 в 16:17

3 Ответа


2

Как уже сказал Саар, вы можете попробовать white-space: nowrap , чтобы сохранить весь текст в одной строке. Добавьте overflow:hidden , чтобы предотвратить неконтролируемый рост содержимого справа (возможно, вам придется вставить div в td , чтобы это сработало, не уверен, что td уважает overflow: hidden.) Он должен работать до тех пор, пока в содержимом нет разрывов строк или блочных элементов.

Однако это никогда не будет надежным решением 100%. Пользователь может выбрать больший размер шрифта, растягивая ячейку, даже если есть только одна строка.

Я не знаю, как выглядит ваше изображение, но как насчет того, чтобы повторить его только горизонтально ( background-repeat: repeat-x) и заполнить rest цветом фона? Обычно это помогает.

Поделиться Pekka 웃     02 декабря 2009 в 16:27


1

Установите «overflow» в «hidden» и определите width&height вашей строки

Поделиться Jan Hančič     02 декабря 2009 в 16:18


0

попробуй собственность css

white-space: nowrap;

Поделиться Saar     02 декабря 2009 в 16:20


Автоматическая высота таблицы-строки

В Примере JSFiddle вы можете увидеть 2 строки таблицы. Мне нужно, чтобы высота первого была установлена автоматически. Вторая высота должна быть установлена в нижней части страницы. Но браузер…


Как иметь html высота таблицы = высота родительского div, когда высота div не задана

У меня есть таблица html, внутри div. Высота div основана на других элементах div. Как я могу сделать так, чтобы высота таблицы была равна высоте ее родительского div? (высота таблицы: 100% не будет…


Динамическая высота строки для таблицы

Используя службы Reporting Services, мне нужно создать таблицу, в которой я могу динамически устанавливать высоту строки в зависимости от длины текста в ячейке, поэтому при экспорте в Excel высота…


Зафиксируйте высоту таблицы html когда gridview внутрь

У меня есть gridview внутри таблицы html. Я установил высоту строки в 30 пикселей, но когда содержимое gridview увеличивается, высота строки также расширяется.


OpenXML, PresentationML Высота таблицы и высота строки при переносе по словам

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


UITableView высота строки по умолчанию Xcode

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


Пропорциональная высота строки таблицы для 38 мм Apple Watch

Высота строки по умолчанию соответствует четырем строкам точно в часы 42 мм. Но на 38-миллиметровых часах четвертый ряд отрезан. В IB у меня есть общий Installed, проверенный для таблицы; для…


Inbox Таблица, Как Gmail-Фиксированная Высота Строки

Я пишу приложение angular email и использовал таблицы bootstrap в своем шаблоне почты. Тело сообщения большое, и я хотел бы ограничить это только одной строкой, что-то похожее на то, как это делает…


Фиксированная высота строки таблицы в html

У меня есть таблица, размещенная в разд. Ни таблица, ни хостинг div не имеют заданной высоты. После строки заголовка таблицы каждая последующая строка выглядит следующим образом: <tr…


iOS AutoLayout самостоятельная калибровка всей таблицы (не ячеек!) высота

Я создаю приложение iOS, которое содержит довольно сложный вид прокрутки (вид, таблица, представление, изображение и т. д.), И мне любопытно: могу ли я создать таблицу самоизмерения с помощью…


Высота строки HTML — идеальная высота строки HTML