Содержание

table» — Блог HTML Academy

Восстановление подмоченной репутации CSS-таблиц

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

Использование таблицы в разметке — щекотливая тема. Для многих веб-разработчиков табличная вёрстка — табу. Хотя существует множество доводов против этого, большинство разработчиков не могут внятно объяснить, почему нельзя использовать табличную разметку, кроме того, что «таблицы — это плохо».

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

Надо признаться, я один из тех разработчиков, кто избегает табличной вёрстки даже для представления табличных данных. Мало того, я даже упрекал своих коллег, когда они использовали display: table для колоночной разметки (или разметки «Holy Grail»).

Оглядываясь назад, я понимаю, что с упрямством, достойным лучшего применения, тратил огромное количество времени на то, чтобы «заточить» CSS под нужную мне задачу.

Два типа табличной разметки

Использовать таблицы в вёрстке можно двумя способами: это HTML-таблица и CSS-таблица.

HTML-таблица — это когда для создания таблицы используется нативный HTML-тег <table>, а CSS-таблица — это имитация того же поведения, но с помощью CSS-свойств.

Есть ключевое различие

Как и те, кто учился по «CSS Zen Garden», я испытываю отвращение к табличной вёрстке в HTML. Сам того не понимая, я позволял обманчивым предубеждениям ввести себя в заблуждение, преувеличивая взаимосвязь между HTML- и CSS-таблицами.

Если нечто выглядит, работает и ведёт себя как таблица, то оно ведь должно быть таблицей? Неправильно!

На самом деле, у CSS-таблиц есть одно ключевое отличие от HTML-таблиц: они могут перестать быть таблицами, стоит только изменить их CSS-свойства. А HTML-таблицы на такое не способны. Это открывает перед нами широкие возможности выборочного использования в вёрстке нужных табличных особенностей.

Ниже вы найдёте несколько примеров использования display: table:

Динамическое вертикальное выравнивание по центру

Нажимайте на кнопку, чтобы добавить строчки.

Это, пожалуй, самый распространённый способ использования display: table. С его помощью можно получить истинное выравнивание по вертикали элементов с динамической высотой.

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

Динамическое горизонтальное выравнивание по центру

Чтобы горизонтально расположить по центру динамический элемент, можно сделать его блочно-строчным (display: inline-block). Затем внешнему контейнеру этого элемента нужно задать свойство text-align: center. Недостаток этого способа состоит в «побочном эффекте» выравнивания текста по центру. Все дочерние элементы внутри контейнера унаследуют свойство text-align: center, которое может переопределить существующие свойства.

Благодаря @mojtabaseyedi я нашёл новый способ выравнивать динамические элементы по горизонтали без побочных эффектов. Нужно применить к динамическому элементу display: table и margin: auto.

Адаптивная вёрстка

Уменьшите окно до <480px, чтобы увидеть адаптивность в действии.

Как я уже упоминал, CSS-таблица может вести себя не как таблица, когда это необходимо. Переключив у элемента свойство display с table-cell на block, мы сможем расположить элементы в стопку.

Порядок следования меняется с 1-2-3 на 2-3-1

Можно даже изменить порядок следования блочных элементов. Подробнее об этом приёме можно почитать здесь.

Динамический прилипающий подвал

Динамический прилипающий подвал

Прилипающий подвал должен соответствовать двум требованиям:

  1. Подвал должен прилипать к низу страницы, когда основного контента слишком мало, чтобы заполнить всю страницу по высоте.
  2. Подвал должен следовать в потоке как обычно, если объём контента превышает высоту страницы.

Если вы когда-нибудь искали решение этой задачи, то вам, возможно, попадались эти полезные варианты от Chris Coyier и Ryan Fait.

Эти решения отлично работают, но у них есть один недостаток: подвал должен быть фиксированной высоты. Эту проблему можно обойти средствами JavaScript, но я всё же предпочитаю использовать для этого CSS. С помощью display: table можно сделать прилипающий подвал с динамической высотой.

Разметка «Holy Grail»

Разметка «Holy Grail» (от A List Apart) — это вариант разметки страницы с шапкой, тремя равными по высоте колонками (две фиксированных боковых колонки и тянущийся центр) и прилипающим подвалом.

Разметка «Holy Grail»

Такая разметка должна по мере возможности удовлетворять следующим требованиям:

  1. Центральная колонка должна тянуться, а боковые — иметь фиксированную ширину.
  2. Центральная колонка может идти первой в разметке.
  3. Любая колонка может быть больше остальных по высоте.

Разметка «Holy Grail» с помощью display: table

В примере выше показана разметка «Holy Grail». Можете менять размеры окна, чтобы средняя колонка тянулась по ширине; также можно добавить контент, чтобы посмотреть, как работает прилипающий подвал. Единственное требование, которому эта разметка не соответствует, — это пункт 2: «Центральная колонка может идти первой в разметке».

Наверно, это нужно для поисковой оптимизации. То есть если соображения SEO для вас не стоят на первом месте, с помощью display: table вы сравнительно легко сделаете разметку «Holy Grail».

Вы шутите? Flexbox всё решит!

Это действительно так. Ознакомьтесь, например, с решением вышеприведённых задач с помощью flexbox от Phillip Walton. Однако, я бы не торопился его применять. На долю IE8 и IE9 до сих пор приходится 32% рынка десктопных браузеров — а это слишком много пользователей, чтобы отказываться от них ради удовольствия применить flexbox. Если только ваш сайт не рассчитан целиком на мобильный трафик — в чём я сильно сомневаюсь, — стоит выбрать display: table.

Уточнение: Я работаю на консалтинговую компанию, поэтому заинтересован в поддержке десктопов. Но если вам нужно поддерживать только мобильные браузеры, можете смело использовать flexbox.

Заключение

Надеюсь, с помощью приведённых примеров мне удалось продемонстрировать полезные свойства несправедливо пренебрегаемого display: table. Однако должен подчеркнуть, что CSS-таблицы — не панацея для разметки. Используйте их уместно, это позволит вам избежать длительных ночей правки CSS-кода.

Display table cell отступы

Таблица без таблицы или display: table-cell для всех браузеров

Перед верстальщиком часто ставят задачу выстроить блоки произвольной ширины в одну линию, например, для ленты фотографий. Эту задачу можно решить в лоб — сделать таблицу, она растянется на нужную длину, и там точно ничего не будет переноситься. Но я расскажу о другом способе.

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

Разметка, например, может быть такой:

Старые браузеры такие значения свойства display не воспринимают. Но для них есть замечательная комбинация других свойств, дающая аналогичный результат.

Комбинация float: left; и clear: right; заставляет следующий блок намертво прилипнуть к предыдущему, образовывая ячейки нашей таблицы. Можно использовать прибивку в другую сторону, если нужен обратный порядок элементов.

Ещё заметки со схожей тематикой
Категории
Коментарии к заметке

В пост врывается inline-block, который с white-space: nowrap у родителя даст как раз то, что нужно.

Кроме того, подобную «ленту» можно довольно удобно двигать влево без лишних врапперов, задавая первому элементу отрицательный левый маджин.

Точно. Элементы с inline-block можно выравнивать по вертикали как в настоящей таблице.

Надо только помнить, что пробелы в разметке дадут лишние пикселы между блоками. Кстати, с этими лишними пикселами можно успешно бороться.

Я уж было поверил, что вы действительно нашли способ эмулировать свойство table-cell. А оказывается тут всего лишь давно известный способ расположить блочные элементы в строку, причём как правильно подмечено, это можно сделать более изящно. Самое главное вы, мне кажется, не уловили. Свойство table-cell позволяет элементам не только размещаться в одном ряду, но и заполнять родительский блок полностью, РАСТЯГИВАЯСЬ по всей его ширине. Копируя таким образом поведение ячеек в таблице. Это крайне полезно, к примеру, в вёрстке горизонтальной навигации, где количество пунктов может меняться, но при этом не потребуется менять стили.

Роман, чаще всего в реальной жизни не бывает одного универсального способа для решения какой-либо задачи. Мне кажется полезным знать не только «cutting edge» решения (которые тоже не идеальны), а еще и вытаскивать из нафталина что-нибудь старенькое проверенное годами.

По поводу растягивания ячеек я могу предложить только expression. Но, так полагаю, что «это не наш метод». Не поленитесь оставить комментарий, пожалуйста, если найдете что-нибудь интересное по этой теме.

Сегодня целый день пытался всеми известными способами выровнять два блока, и только это решение меня спасло. Благодарен Вам за полезный пост

Насколько я знаю в основном table-cell используют для вертикального выравнивания контента, а при обтекании оно перестает работать. Ну и еще для таких блоков не работают внешние отступы margin.

Отлично! То что нужно. Замечательная альтернатива

В верстке присутствуют ошибка!

Александр, по-моему, всё в порядке с вёрсткой. Ширина ячейки таблицы зависит от контента. Ширина таблицы равна сумме ширин всех её ячеек.

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

© 2009–2017 Владимир Кузнецов.
Все права защищены и принадлежат их владельцам.

Копирование материалов данного блога допускается только с разрешения автора.

CSS-свойство display: table и другие, делают вывод группы элементов подобно таблице

, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.

Полный список свойств и тегов, которые они заменяют:

display: table;
display: inline-table;
но с display: inline-block
display: table-caption;
display: table-column-group;
display: table-column;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-cell;или

Таблица – сетка

Часто табличная верстка используется в качестве сеточной разметки, хотя это семантически неправильно и возникнут проблемы у мобильной или адаптивной версии. Для сеток специально ввели CSS Gr >display: table .

Рассмотрим пример – сетка 3×2 в три колонки сделанная таблицей:

I have 2 divs as display: table-cell . I need a space between them.

margin-left: 5px for the second div does not work.

I already saw the Why is a div with «display: table-cell;» not affected by margin? answer, but my question is not about how to have a border around a cell, but a LEFT MARGIN (and not padding!) for a concrete cell (the right one)

setting the green div as

makes the space not only between cells, but also all around cells, that is NOK.

Когда флексбоксы не всесильны, или сюрприз тёмной стороны CSS — CSS-LIVE

Сегодня, когда флексбоксы поддерживаются в 93% браузеров, многие видят в них панацею для верстки. И неспроста: это первый модуль CSS специально для раскладки блоков, многие когда-то сложные задачи с ним решаются буквально парой строчек. Есть даже целая галерея таких решений (ее автор Филип Уолтон знаком нам по систематизации браузерных багов с флексбоксами). Кажется, что этой новой чудесной технологии подвластно всё. Так что легко понять недавнее удивление известного веб-дизайнера, разработчика и популяризатора Уэса Боса в твиттере:

Неужели это невозможно с флексбоксами? Как мне заставить флекс-элементы растягиваться, но выравнивать свой контент по вертикали? Вот код: codepen. io/wesbos/pen/vOxWbq

Казалось бы, элементарная задача. Всего одна строка флекс-элементов, в самих элементах ничего хитрого, обычное строчное содержимое. И по отдельности требования Уэса реализуются проще некуда. Вертикальное центрирование — одной строчкой кода:

align-items:center. Растягивание блоков до одинаковой высоты — вообще без кода, это делает значение align-items:stretch по умолчанию. Одна проблема — свойство принимает лишь одно значение.

В длинном обсуждении твита решения так и не нашлось.

Первая мысль, пришедшая на ум и самому Уэсу, и комментаторам, и вашему покорному слуге — флексбоксы можно вкладывать друг в друга. Можно поставить display:flex самим флекс-элементам, превратив их во флекс-контейнеры для их собственного содержимого, со всем флексбоксовым арсеналом. Еще пара строчек CSS — и на первый взгляд задача

почти решена:

See the Pen KpmKJN by Ilya Streltsyn (@SelenIT) on CodePen.

Но присмотритесь внимательнее. Почему выделенные жирным слова слиплись с предыдущими, как будто перед ними нет пробела, а цифра «4» в предпоследней ячейке заняла целую строку, хотя на предыдущей строке перед ней куча места?

Анонимная разгадка

Дело в том, что в этой задаче «волшебные» свойства флексбоксов оказывают медвежью услугу. Из-за того, что display:flex меняет отображение непосредственных потомков флекс-контейнера, наши строчные элементы

перестали быть строчными.

Помните, что разные display принадлежат разным «мирам» (контекстам форматирования) и на «стыке» миров встречаются «призраки» — анонимные боксы? Здесь как раз такой случай. Во флексбоксовом контексте не бывает ничего строчного. И обычные дочерние элементы превратились во флекс-элементы, а текст между ними — в анонимные флекс-элементы. И те, и другие могут переноситься на новую строку флекс-элементов (когда контейнеру задано flex-wrap:wrap) — но только целиком. Как инлайн-блоки. Только, в отличие от инлайн-блоков — «живущих» в строчном «мире», где межсловные пробелы значимы — пробелы между флекс-элементами не учитываются.

Вот и объяснение обеих загадок. Нет пробелов — слова слиплись. А две строки перед цифрой «4» — на самом деле один анонимный флекс-элемент, заполнивший всю ширину своей ячейки, и тем самым вынудивший любые последующие флекс-элементы перенестись строкой ниже.

Чтобы решить задачу до конца, нам нужно вернуть строчное содержимое в его родной строчный «мир», т.е. контекст. И единственный способ сделать это — добавить обертку-прослойку. Чтобы «магия» флексбоксов действовала на нее лишь снаружи, а внутри всё шло своим чередом, как в обычном блоке. Увы, без добавочной разметки не обойтись: нельзя быть в двух «мирах» одновременно, по крайней мере в CSS.

Забытая альтернатива

Раз уж могучие флексбоксы не могут справиться с этой задачей, неужели CSS вообще бессилен перед ней? И тут перед нами встает соблазн «тёмной стороны CSS».

Об этом CSS-механизме ходит бесчисленное количество мифов, порой нелепых, иногда небезосновательных. Многие верстальщики говорят о нем лишь со снисходительной усмешкой. Прошлой осенью немало шуму наделала статья «Антигерой CSS-раскладки» (есть ее перевод на htmlacademy.ru), пытавшаяся реабилитировать его, но некоторые заявления этой статьи получились… забавными, и сам автор существенно недооценил мощь этой «темной стороны». А совсем недавно появился целый микрофреймворк на базе этого механизма — правда, его тоже не восприняли всерьез…

Да, речь о старых добрых (или не очень?) CSS-таблицах. И с ним задача Уэса решается даже меньшим количеством кода, чем с флексбоксами!

See the Pen vOmYbM by Ilya Streltsyn (@SelenIT) on CodePen.

Заметьте, что строчные элементы остались строчными, а дополнительной разметки не понадобилось.

Новая старая панацея?

Конечно, нет. У CSS-таблиц хватает своих реальных проблем, прежде всего — браузерных багов. С другой стороны, у флексбоксов их тоже хватает. Я думаю, что в любом случае полезно знать как можно больше инструментов, с их плюсами и минусами — и использовать то, что лучше подходит по ситуации, не ограничивая себя искусственно. Пример этой статьи показывает, что иногда — пусть редко, но всё же — забытые (незаслуженно?) решения вполне могут поспорить с модными новинками. Буду рад любым замечаниям и возражениям в комментариях.

И да пребудет с вами сила всего CSS!

P.S. Это тоже может быть интересно:

html — display: table-cell не работает должным образом со 100% шириной

Я хотел выровнять текст по вертикали внутри div:

display:table-cell;
vertical-align: middle;

Текст выравнивается, но div (имеющий 100% ширину) становится меньше по ширине. В чем проблема? Есть ли другой хороший способ выровнять по вертикали?

РЕДАКТИРОВАТЬ: еще немного HTML-кода:

 <div>
  <div>
    <div></div>
   <div></div>
  </div>
</div>

3

user3475724 27 Фев 2015 в 03:43

2 ответа

Лучший ответ

Я обновил ваш код, чтобы он заработал:

<div>
  <divstyle="position:relative;width:100%;">
    <div>
     <div>test

   </div>
  </div>
</div>

Вам нужно было добавить div с display: table и установить все содержащиеся элементы на 100% width. Также для div, который вы центрируете, нужен text-align: center.

2

simhumileco 17 Июл 2019 в 08:42

Элемент, отображаемый как

table-cell без какого-либо родительского элемента, явно отображаемого как table, создаст свой собственный теневой родительский элемент, отображаемый как таковой (и другой промежуточный элемент, установленный как table-row) . Его нигде не видно в DOM, но он все равно действует.

Алгоритм компоновки таблиц по умолчанию — table-layout: auto, а вы хотите table-layout: fixed: прежний алгоритм компоновки адаптирует размеры ячеек к вашему контенту; последний будет уважать то, что автор (вы) говорит о ширине. Вы можете протестировать, имея очень мало содержимого в одной «ячейке», а затем очень длинное многострочное содержимое.

#posts {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
}

Вы также должны удалить или адаптировать ширину ячеек: общая должна быть 100%, иначе она будет пропорциональной в большинстве браузеров (Safari подвергается риску. Может быть, не Saf 8, но по крайней мере 6 …)

4

FelipeAls 27 Фев 2015 в 01:13

Дисплей

— CSS: каскадные таблицы стилей

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

Формально свойство display устанавливает внутренний и внешний типы отображения элемента. Внешний тип устанавливает участие элемента в компоновке потока; внутренний тип устанавливает расположение детей. Некоторые значения display полностью определены в их собственных индивидуальных спецификациях; например, подробности того, что происходит при объявлении

display: flex , определено в спецификации CSS Flexible Box Model.См. Таблицу в конце этого документа для получения всех индивидуальных характеристик.

Свойство отображения CSS задается с использованием значений ключевых слов.

 
дисплей: блок;
дисплей: встроенный;
дисплей: встроенный блок;
дисплей: гибкий;
дисплей: встроенный гибкий;
дисплей: сетка;
дисплей: встроенная сетка;
дисплей: поток-корень;


дисплей: нет;
дисплей: содержимое;


отображение: блокировка потока;
дисплей: встроенный поток;
дисплей: встроенный поток-корень;
дисплей: блок гибкий;
дисплей: встроенный гибкий;
отображение: блочная сетка;
отображение: встроенная сетка;
отображение: блокировать поток-корень;


дисплей: таблица;
дисплей: таблица-строка;
отображение: элемент списка;


дисплей: наследовать;
дисплей: начальный;
дисплей: вернуться;
дисплей: не настроен;

Значения ключевых слов можно сгруппировать в шесть категорий значений.

снаружи

<дисплей-снаружи>
Эти ключевые слова определяют внешний тип отображения элемента, который, по сути, является его ролью в компоновке потока.

Допустимые значения :

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

Примечание : Браузеры, поддерживающие синтаксис двух значений, при нахождении только внешнего значения, например, когда указано display: block или display: inline , установят внутреннее значение на flow . Это приведет к ожидаемому поведению; например, если вы укажете элемент как блокируемый, можно ожидать, что дочерние элементы этого элемента будут участвовать в блочном и встроенном нормальном потоковом макете.

Внутри

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

Действительный значений:

расход
Элемент размещает свое содержимое с использованием потоковой компоновки (блочная компоновка).

Если его внешний тип отображения - inline или run-in , и он участвует в блочном или встроенном контексте форматирования, то он генерирует встроенный блок.В противном случае он генерирует блок-контейнер.

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

корень потока
Элемент генерирует блок блочного элемента, который устанавливает новый контекст форматирования блока, определяя, где находится корень форматирования.
стол
Эти элементы ведут себя как элементы HTML . Он определяет блок уровня блока.
гибкий
Элемент ведет себя как блочный элемент и размещает его содержимое в соответствии с моделью Flexbox.
сетка
Элемент ведет себя как блочный элемент и размещает его содержимое в соответствии с сеточной моделью.
рубин
Элемент ведет себя как встроенный элемент и размещает свое содержимое в соответствии с моделью форматирования Ruby.Он ведет себя как соответствующие элементы HTML .

Примечание : браузеры, поддерживающие синтаксис двух значений, при нахождении только внутреннего значения, например, когда указано display: flex или display: grid , установят свое внешнее значение на block . Это приведет к ожидаемому поведению; например, если вы укажете элемент как display: grid , можно ожидать, что блок, созданный в контейнере сетки, будет блоком уровня блока.

Элемент списка

Элемент создает блок-блок для содержимого и отдельный встроенный блок для элемента списка.

Одно значение list-item заставит элемент вести себя как элемент списка. Его можно использовать вместе с list-style-type и list-style-position .

элемент списка также можно комбинировать с любым ключевым словом и ключевыми словами flow или flow-root .

Примечание : В браузерах, поддерживающих двухзначный синтаксис, если внутреннее значение не указано, по умолчанию будет , поток . Если внешнее значение не указано, у основного блока будет внешний тип отображения , блок .

Внутренний

<внутренний-дисплей>
Некоторые модели макетов, такие как table и ruby ​​, имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние и потомки.В этом разделе определяются те «внутренние» отображаемые значения, которые имеют значение только в этом конкретном режиме макета.

Допустимые значения :

таблица-строка-группа
Эти элементы ведут себя как
HTML-элементов.
таблица-заголовок-группа
Эти элементы ведут себя как
HTML-элементов.
нижний колонтитул группы
Эти элементы ведут себя как
HTML-элементов.
стол-ряд
Эти элементы ведут себя как элементы HTML
.
таблица-ячейка
Эти элементы ведут себя как элементы HTML
HTML-элементов.
таблица-столбец
Эти элементы ведут себя как элементы HTML
.
заголовок таблицы
Эти элементы ведут себя как
<тр ..> <тд..> <тр ..>
.
таблица-столбец-группа
Эти элементы ведут себя как
HTML-элементов.
рубиновая основа
Эти элементы ведут себя как элементы HTML .
рубиновый текст
Эти элементы ведут себя как элементы HTML .
рубиновый базовый контейнер
Эти элементы ведут себя как HTML-элементов, созданных как анонимные блоки.
рубиновый текст-контейнер
Эти элементы ведут себя как элементы HTML .

Коробка

Эти значения определяют, генерирует ли элемент вообще поля отображения.

Действительный значений:

содержимое
Эти элементы сами по себе не создают конкретную коробку. Их заменяют их псевдобоксы и их дочерние блоки.Обратите внимание, что спецификация CSS Display Level 3 определяет, как значение content должно влиять на «необычные элементы» - элементы, которые не отображаются исключительно с помощью концепций блока CSS, таких как замененные элементы. См. Приложение B: Эффекты отображения: содержание необычных элементов для получения более подробной информации.

Из-за ошибки в браузерах этот элемент в настоящее время удаляется из дерева специальных возможностей - программы чтения с экрана не будут смотреть на то, что находится внутри. Более подробную информацию см. В разделе «Проблемы доступности» ниже.

нет
Отключает отображение элемента, чтобы оно не влияло на макет (документ отображается так, как будто этот элемент не существует). У всех дочерних элементов также отключено отображение.
Чтобы элемент занимал место, которое он обычно занимает, но без фактического рендеринга чего-либо, используйте вместо этого свойство visibility .

Наследие

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

Допустимые значения :

встроенный блок
Элемент генерирует блок блочного элемента, который будет объединен с окружающим содержимым, как если бы он был одним встроенным блоком (ведет себя так же, как замененный элемент).

Это эквивалент встроенного корневого потока .

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

Это эквивалент встроенной таблицы .

линейный гибкий
Элемент ведет себя как встроенный элемент и размещает его содержимое в соответствии с моделью flexbox.

Это эквивалент inline flex .

встроенная сетка
Элемент ведет себя как встроенный элемент и размещает его содержимое в соответствии с сеточной моделью.

Это эквивалент встроенной сетки .

Какой синтаксис использовать сейчас?

В спецификации уровня 3 подробно описаны два значения для свойства display , что позволяет явно указать внешний и внутренний тип отображения, но это еще не поддерживается браузерами.

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

  .container {
  дисплей: встроенный гибкий;
}

В настоящее время это можно указать с помощью одного значения.

  .container {
  дисплей: встроенный гибкий;
}

Дополнительные сведения об этих изменениях в спецификации см. В статье «Адаптация к новому двухзначному синтаксису отображения».

Глобальный 

 
дисплей: наследовать;
дисплей: начальный;
дисплей: не настроен;

На отдельных страницах для различных типов значений, которые отображает , может быть установлено на нем несколько примеров этих значений в действии - см. Раздел «Синтаксис».Кроме того, см. Следующий материал, в котором подробно рассматриваются различные значения отображения.

CSS Flow Layout (display: block, display: inline)

display: flex

display: grid

display: none

Использование display , значение none на элементе удалит его из дерева доступности . Это приведет к тому, что элемент и все его дочерние элементы больше не будут объявляться технологией чтения с экрана.

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

display: contents

Текущие реализации в большинстве браузеров удаляют из дерева доступности любой элемент со значением display , равным content (но потомки останутся). Это приведет к тому, что сам элемент больше не будет объявляться технологией чтения с экрана. Это неправильное поведение согласно спецификации CSS.

Таблицы

Изменение значения display элемента

на block , grid или flex изменит его представление в дереве доступности.Это приведет к тому, что таблица больше не будет правильно объявляться технологией чтения с экрана.

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

Сравнение отображаемых значений

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

Мы включили padding и background-color в контейнеры и их дочерние элементы, чтобы было легче увидеть эффект, который оказывают отображаемые значения.

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

HTML 
  <статья>
   Первый 
   Второй 
   Третий 

<статья>
 Первый 
 Второй 
 Третий 




<выбор>
<выбранная опция> заблокировать
CSS 
  html {
  семейство шрифтов: helvetica, arial, sans-serif;
  межбуквенный интервал: 1 пиксель;
  padding-top: 10 пикселей;
}

статья {
  цвет фона: красный;
}

article span {
  цвет фона: черный;
  цвет белый;
  маржа: 1px;
}

article, span {
  отступ: 10 пикселей;
  радиус границы: 7 пикселей;
}

article, div {
  маржа: 20 пикселей;
}
JavaScript 
  const статьи = документ.querySelectorAll ('. контейнер');
const select = document.querySelector ('выбрать');

function updateDisplay () {
  article.forEach ((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener ('изменить', updateDisplay);

updateDisplay ();
Результат

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

Таблицы BCD загружаются только в браузере

Антигерой CSS Layout - "display: table"

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

Тема использования таблиц в макетах - деликатная. В общем, веб-разработчики считают табличную верстку табу. Хотя причины против этого хорошо задокументированы, большинство разработчиков не могут предоставить надежный фон для разоблачения компоновки таблиц, за исключением того, что «таблицы плохи».

Начало движения против таблиц HTML было сильным. Ему удалось «промыть мозги» многим поколениям разработчиков, заставив их думать, что любое использование таблицы - зло.

По общему признанию, я один из тех разработчиков, которые избегали компоновки таблиц даже для отображения табличных данных. Я даже упрекнул своих коллег-разработчиков, когда они использовали display: table для макета в стиле приборной панели (или макета Святого Грааля).

Оглядываясь назад, я могу сказать, что с моей стороны было невероятно упрямым тратить нелепое количество времени на взлом CSS.

Два типа сервировки стола

Существует два способа использования таблицы в макете - HTML Table и CSS Table .

HTML Table относится к использованию таблицы с собственным тегом

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

Есть ключевое отличие

Как человек, изучивший свое ремесло в CSS Zen Garden, я ненавижу HTML-макет таблицы. По незнанию, я попался на «иллюзорную ошибку корреляции», переоценив взаимосвязь между HTML Table и CSS Table .

Если он выглядит, работает и звучит как стол, это должен быть стол? Неправильно!

Фактически, CSS Table имеет ключевое отличие от HTML Table . Он может не быть таблицей, просто настроив его свойства CSS. То, на что HTML Table неспособен. И с этим вы можете разблокировать множество возможностей, выбирая вкусные макеты, которые вы получаете из таблицы.

Ниже приведены некоторые примеры display: table , которые могут оказаться полезными:

Динамическое центрирование по вертикали

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

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

Эта суть обозначена так не просто так. Но это другая история на другой день.

Динамическое центрирование по горизонтали

Чтобы выровнять динамический элемент по центру по горизонтали, вы можете установить элемент display: inline-block .Затем установите text-align: center на внешней оболочке этого элемента. Недостатком здесь является побочный эффект выравнивания текста. Все дочерние элементы во внешней оболочке унаследуют свойство text-align: center , что может привести к перезаписи.

Благодаря @mojtabaseyedi я нашел новый способ горизонтального выравнивания динамического элемента по центру без побочных эффектов. Примените display: table и margin: auto к динамическому элементу.

Адаптивный макет

Как упоминалось выше, таблица CSS может при желании не вести себя как таблица.Переключив свойство display элемента с table-cell на block , мы можем сложить элемент в стек.

Порядок стека

Вы даже можете изменить порядок стека. Вы можете узнать больше о технике здесь.

Динамический липкий нижний колонтитул

Липкий нижний колонтитул должен соответствовать этим двум критериям:

  1. Нижний колонтитул должен прилипать к нижней части страницы, когда содержание основного текста недостаточно, чтобы превышать высоту страницы.
  2. Нижний колонтитул продолжит движение в обычном режиме, если содержание основного текста превысит высоту страницы

Если вы когда-либо искали решение для липкого нижнего колонтитула, вы могли встретить эти полезные фрагменты Криса Койера или Райана Фейта.

Их решения работают очень хорошо, но есть только один недостаток - нижний колонтитул должен иметь фиксированную высоту. Вы можете решить эту проблему с помощью javascript, но я предпочитаю решать ее с помощью CSS. С display: table вы можете создать липкий нижний колонтитул с динамической высотой.

Макет Святого Грааля

Согласно alistapart, макет Святого Грааля представляет собой страницу с заголовком, 3 столбцами одинаковой высоты (2 фиксированных боковых панели и плавный центр) и липким нижним колонтитулом.

Насколько это возможно, макет Святого Грааля должен достигать следующих целей:

  1. имеют жидкостный центр с боковыми планками фиксированной ширины
  2. позволяет центральному столбцу появляться первым в источнике
  3. позволяет любой колонне быть самой высокой

Приведенный выше кодовый ключ воссоздает макет Holy Grail .Вы можете изменить размер окна до среднего столбца, а также добавить больше контента для проверки липкого нижнего колонтитула. Единственная цель, которую не удалось выполнить -

.

2) разрешить центральному столбцу появиться первым в источнике

Я предполагаю, что эта цель предназначена для SEO. Следовательно, если поисковая оптимизация не имеет первостепенного значения, display: table сравнительно легко решит этот макет Holy Grail .

Ты что, шутишь? CSS Flex может решить все!

Действительно, может.Ознакомьтесь с гибким решением Филипа Уолтона в моих приведенных выше примерах. Однако в ближайшее время я не тороплюсь с этим. IE8 и IE9 по-прежнему составляют 32% доли рынка настольных браузеров, и от этого многого стоит отказаться, если я вернусь к гибкому решению. Если веб-сайт не обслуживает исключительно мобильный трафик, в чем я очень сомневаюсь, я все равно буду придерживаться своего дисплея : таблица .

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

Заключение

Надеюсь, что с помощью приведенных выше примеров я смогу раскрыть качества заклейменного дисплея : таблица . Однако я должен подчеркнуть, что CSS Table - это не серебряная пуля для макетов (читайте: причудливые ошибки). Используйте их в правильном контексте, и вы избавите себя от многих ночных взломов CSS.

Рекомендуемая литература: Макет таблицы в CSS: Детальная визуализация таблицы в CSS

Понравилась статья?
Подпишитесь ниже, чтобы получать обновлений из первых рук !

html - Как (и почему) использовать display: table-cell (CSS)

После нескольких дней попыток найти ответ я наконец нашел

дисплей: таблица;

В Интернете было на удивление очень мало информации о том, как заставить его работать, даже здесь, например, «Как»:

Чтобы использовать этот фантастический фрагмент кода, вам нужно вспомнить, когда таблицы были единственным реальным способом структурировать HTML, а именно синтаксис.Чтобы получить таблицу с 2 строками и 3 столбцами, вам необходимо сделать следующее:

  <таблица>

Аналогично, чтобы заставить CSS сделать это, вы должны использовать следующее:

HTML

CSS 

  #table {
    дисплей: таблица;
}
.tr {
    дисплей: таблица-строка;
}
.td {
    дисплей: таблица-ячейка; }

Как вы можете видеть в примере ниже, блоки div в 3-м столбце не имеют содержимого, но соблюдают автоматическую высоту, установленную текстом в первых 2-х столбцах. ВЫИГРАТЬ!

  #table {
    дисплей: таблица;
    отступ: 5 пикселей;
}
.tr {
    дисплей: таблица-строка;
    отступ: 5 пикселей;
}
.td {
    дисплей: таблица-ячейка;
    отступ: 5 пикселей;
    ширина: 150 пикселей;
    граница: # 000000 solid 1px;
    маржа: 5 пикселей;
}  
  

    

        
 Строка 1,
            
 Колонка 1 

        
 Ряд 1, столбец 2 

        
 

    

    

        
 Строка 2,
            
 Колонка 1 

        
 Строка 2, Колонка 2

Стоит отметить, что display: table; не работает в IE6 или 7 ( спасибо, FelipeAls ), поэтому, в зависимости от ваших потребностей в отношении совместимости с браузером, это может быть не тот ответ, который вы ищете.

tablelayout - Как должен работать CSS "display: table-column"?

Модель таблицы CSS основана на модели таблицы HTML. http://www.w3.org/TR/CSS21/tables.html

Таблица разделена на СТРОКИ, и каждая строка содержит одну или несколько ячеек. Ячейки являются дочерними элементами ROWS, они НИКОГДА не являются дочерними элементами столбцов.

«display: table-column» НЕ предоставляет механизма для создания столбцов (например, страниц газет с несколькими столбцами, где контент может перетекать из одного столбца в другой).

Напротив, «таблица-столбец» устанавливает ТОЛЬКО атрибуты, которые применяются к соответствующим ячейкам в строках таблицы. Например. «Цвет фона первой ячейки в каждой строке - зеленый».

Сама таблица всегда имеет такую ​​же структуру, как и в HTML.

В HTML (обратите внимание, что «td» находятся внутри «tr», а НЕ внутри «col»):

  <таблица ..>

Соответствующий HTML с использованием свойств таблицы CSS (обратите внимание, что блоки div «столбец» не содержат какого-либо содержимого - стандарт не позволяет размещать содержимое непосредственно в столбцах):

  .mytable {
  дисплей: таблица;
}
.myrow {
  дисплей: таблица-строка;
}
.mycell {
  дисплей: таблица-ячейка;
}
.column1 {
  дисплей: таблица-столбец;
  цвет фона: зеленый;
}
.column2 {
  дисплей: таблица-столбец;
}  
  

  
 

  
 

  

    
 содержимое первой ячейки в строке 1 

    
 содержимое второй ячейки в строке 1 

  

  

    
 содержимое первой ячейки в строке 2 

    
 содержимое второй ячейки в строке 2

ДОПОЛНИТЕЛЬНО : как «строки», так и «столбцы» можно стилизовать, назначив несколько классов каждой строке и ячейке следующим образом.Такой подход дает максимальную гибкость при указании различных наборов ячеек или отдельных ячеек, которым нужно задать стиль:

  // Полезные объявления css, в зависимости от того, на что вы хотите повлиять, включают:

/ * все ячейки (содержащие "class = mycell") * /
.mycell {
}

/ * класс row1, где бы он ни использовался * /
.row1 {
}

/ * все ячейки строки 1 (если вы поместили "class = mycell" в каждую ячейку) * /
.row1 .mycell {
}

/ * ячейка1 строки1 * /
.row1 .cell1 {
}

/ * ячейка1 всех строк * /
.cell1 {
}

/ * row1 внутри класса mytable (так что могут быть разные таблицы с разными стилями) * /
.mytable .row1 {
}

/ * все ячейки row1 mytable * /
.mytable .row1 .mycell {
}

/ * ячейка1 строки1 mytable * /
.mytable .row1 .cell1 {
}

/ * cell1 всех строк mytable * /
.mytable .cell1 {
}  
  

  
 

  
 

  

    
 содержимое первой ячейки в строке 1 

    
 содержимое второй ячейки в строке 1 

  

  

    
 содержимое первой ячейки в строке 2 

    
 содержимое второй ячейки в строке 2

В сегодняшних гибких проектах, которые используют

для нескольких целей, разумно поместить некоторый класс в каждый div, чтобы облегчить обращение к нему.Здесь то, что раньше было в HTML, стало class myrow , а стало class mycell . Это соглашение и делает полезными приведенные выше селекторы CSS.

ПРИМЕЧАНИЕ ПРОИЗВОДИТЕЛЬНОСТИ : размещение имен классов в каждой ячейке и использование вышеупомянутых мультиклассовых селекторов дает лучшую производительность, чем использование селекторов, заканчивающихся на * , таких как .row1 * или даже .row1> * . Причина в том, что селекторы соответствуют последним первым , поэтому при поиске совпадающих элементов .row1 * сначала выполняет * , что соответствует всем элементам, а затем проверяет всех предков каждого элемента , чтобы определить, имеет ли какой-либо предок класса row1 . Это может быть медленным в сложном документе на медленном устройстве. .row1> * лучше, потому что проверяется только непосредственный родитель. Но еще лучше сразу удалить большинство элементов через .row1 .cell1 . ( .row1> .cell1 - еще более жесткая спецификация, но это первый шаг поиска, который имеет наибольшее значение, поэтому обычно не стоит беспорядок и дополнительный мыслительный процесс относительно того, всегда ли он будет быть прямым потомком добавления дочернего селектора > .)

Ключевым моментом для отказа от производительности является то, что последний элемент в селекторе должен быть как можно более конкретным и никогда не должен быть * .

html - Формы в таблицах, воспроизведенных с помощью свойства css "display: table"

html - Формы в таблицах, воспроизведенных с помощью свойства css "display: table" - qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 1к раз

Я пытаюсь воспроизвести таблицу со свойствами CSS display: table / table-row / table-cell .Однако кажется, что

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

Можно ли в этой ситуации заставить формы вести себя как другие элементы? Я определил формы как display: inline в CSS, но это не помогает.

Мой код (упрощен для читабельности)

  форма {
  дисплей: встроенный;
}

.calendarTable {
  дисплей: таблица;
  маржа: авто;
  ширина: 60%;
}

.calendarRow {
  дисплей: таблица-строка;
}

.calendarCell {
  дисплей: таблица-ячейка;
  выравнивание текста: слева;
  отступ: 10 пикселей;
  вертикальное выравнивание: по центру;
}  
  

  

    

      
 Заголовок 

      
 Заголовок 

      
 Заголовок 

    


    
    
      

        

          <некоторые данные>
        

        

          <некоторые входные данные с formaction>
        

      

      

    
    

    

      

        

          <некоторые данные>
        

        

          <некоторые входные данные с formaction>

Создан 19 мар.

3

ОБНОВЛЕНИЕ

По запросу ОП,

Я хотел знать, возможно ли правильное поведение форм в этом сценарии.

Действительно возможно, я не уверен, что это действительно так, но работает безупречно.

РЕШЕНИЕ

Назначить каждую

display: table-row

См. Обновленный фрагмент.

  1. Было с, обернутых вокруг .calendarRow с

  2. Во 2-й и 3-й строках было только по 2 ячейки, в то время как в 1-й строке было 3 ячейки.

Если бы мы применили недопустимый HTML к

, и
, то они также работали бы нестабильно. В этом фрагменте у меня:

  1. Удалено
  2. Добавлена ​​1 ячейка во 2-ю и 3-ю строки
  3. Добавлено table-layout: исправлено , чтобы еще больше контролировать поведение таблицы. Обратите внимание, что я объявил, что каждая ячейка имеет ширину 32%. Обычно это сложно сделать, потому что в третьем столбце больше содержимого, чем в других столбцах.
  4. Добавлены контуры для демонстрации правильного выравнивания ячеек.

СНиПЕТ 

  .calendarTable {
  дисплей: таблица;
  маржа: авто;
  ширина: 60%;
  table-layout: фиксированный;
}

.calendarRow {
  дисплей: таблица-строка;
}

.calendarCell {
  дисплей: таблица-ячейка;
  выравнивание текста: слева;
  отступ: 10 пикселей;
  вертикальное выравнивание: по центру;
  ширина: 32%;
}

п {
  контур: сплошной черный 1px;
}

.красный {
  красный цвет;
  font-weight: 700
}  
  

  

    <форма>
      
 Заголовок 

      
 Заголовок 

      
 Заголовок 

    
    <форма>
      
 Новое название 

      
 Новое название 

      
 Эта ячейка отсутствовала 

    
    <форма>
      
 Новое название 

      
 Новое название 

      
 Эта ячейка отсутствовала