Антигерой — один из центральных персонажей фильма, книги или пьесы, не обладающий обычными героическими качествами.
Использование таблицы в разметке — щекотливая тема. Для многих веб-разработчиков табличная вёрстка — табу. Хотя существует множество доводов против этого, большинство разработчиков не могут внятно объяснить, почему нельзя использовать табличную разметку, кроме того, что «таблицы — это плохо».
Импульс от давнего начала движения против использования HTML-таблиц был силен. Он оказал влияние на многие поколения разработчиков, заставив их думать, что любое использование таблиц — зло.
Надо признаться, я один из тех разработчиков, кто избегает табличной вёрстки даже для представления табличных данных. Мало того, я даже упрекал своих коллег, когда они использовали display: table для колоночной разметки (или разметки «Holy Grail»).
Оглядываясь назад, я понимаю, что с упрямством, достойным лучшего применения, тратил огромное количество времени на то, чтобы «заточить» CSS под нужную мне задачу.
Два типа табличной разметки
Использовать таблицы в вёрстке можно двумя способами: это HTML-таблица и CSS-таблица.
HTML-таблица — это когда для создания таблицы используется нативный HTML-тег
, а 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 .
Адаптивная вёрстка
Уменьшите окно до , чтобы увидеть адаптивность в действии.
Как я уже упоминал, CSS-таблица может вести себя не как таблица, когда это необходимо. Переключив у элемента свойство display с table-cell на block , мы сможем расположить элементы в стопку.
Порядок следования меняется с 1-2-3 на 2-3-1
Можно даже изменить порядок следования блочных элементов. Подробнее об этом приёме можно почитать здесь.
Динамический прилипающий подвал
Прилипающий подвал должен соответствовать двум требованиям:
Подвал должен прилипать к низу страницы, когда основного контента слишком мало, чтобы заполнить всю страницу по высоте.
Подвал должен следовать в потоке как обычно, если объём контента превышает высоту страницы.
Если вы когда-нибудь искали решение этой задачи, то вам, возможно, попадались эти полезные варианты от Chris Coyier и Ryan Fait.
Эти решения отлично работают, но у них есть один недостаток: подвал должен быть фиксированной высоты. Эту проблему можно обойти средствами JavaScript, но я всё же предпочитаю использовать для этого CSS. С помощью display: table можно сделать прилипающий подвал с динамической высотой.
Разметка «Holy Grail»
Разметка «Holy Grail» (от A List Apart) — это вариант разметки страницы с шапкой, тремя равными по высоте колонками (две фиксированных боковых колонки и тянущийся центр) и прилипающим подвалом.
Разметка «Holy Grail»
Такая разметка должна по мере возможности удовлетворять следующим требованиям:
Центральная колонка должна тянуться, а боковые — иметь фиксированную ширину.
Центральная колонка может идти первой в разметке.
Любая колонка может быть больше остальных по высоте.
Разметка «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-кода.
Источник
Почему CSS td width не работает?
почему не работает ширина CSS?
также, что влияния положения: фиксированный, абсолютный ЕТК имеют на ширинах тд если любые? Я ищу причину больше, чем исправление. Я надеюсь понять, как это работает.
11 ответов:
это может быть не то, что вы хотите услышать, но display: table-cell не учитывает ширину и будет свернут на основе ширины всей таблицы. Вы можете легко обойти это, просто имея display: block элемент внутри самой ячейки таблицы, ширину которой вы указываете, например
это не должно иметь большого значения, если
сам по себе position: fixed или абсолютный, потому что положение ячеек все статические относительно стол.
EDIT: я не могу взять кредит, но, как говорят комментарии, Вы можете просто использовать min-width вместо width вместо этого в ячейке таблицы.
вам лучше использовать table-layout: fixed
авто значение по умолчанию и с большими таблицами может вызвать немного задержки на стороне клиента в браузере перебирает его, чтобы проверить все размеры подходят.
основные намного лучше и быстрее отображается на странице. Структура таблицы зависит от общей ширины таблиц и ширины каждого из столбцов.
здесь он применяется к исходному примеру: JSFIDDLE, вы заметите, что остальные столбцы дробятся и перекрывают их содержимое. Мы можем исправить это с помощью еще нескольких CSS (все, что мне нужно было сделать, это добавить класс в первый TR):
причина, по которой он не работает в ссылке, которую вы предоставили, заключается в том, что вы пытаетесь отобразить столбец 300px плюс 52 столбца, охватывающих 7 столбцов каждый. Сократите количество столбцов, и это работает. Вы не можете поместиться так много на экране.
Если вы хотите, чтобы заставить столбцы соответствовать попробуйте установить:
смотрите мой jsfiddle:http://jsfiddle.net/Mkq8L/6/ @Майк я пока не могу комментировать.
причина в том, что вы не указали ширину таблицы, и вся ваша куча td переполнена.
вот например, Я дал таблице ширину 5000px, которая, как я думал, будет соответствовать вашим требованиям.
это тот же самый код, который вы предоставили, который я просто добавил в ширину таблицы.
Я считаю, что происходит, потому что ваши TD-это путь мимо ширины таблицы по умолчанию. Которые вы могли видеть, если вы вытаскиваете около 45 ваших td в каждом tr, (т. е. код, который вы предоставили в своем вопросе, а не jsfiddle) он работает точно отлично
Источник
display: table и все с ним связанное
Всем привет. Есть несколько вопросов по использованию display: table;
Рационально ли делать верстку на основе display: table?
Как объединять ячейки внутри элемента с display: table-row?
Почему header c классом .row в коде ниже не заполняет всю ширину таблицы?
2 ответа 2
1. Рационально ли делать верстку на основе display: table?
Со времен табличной верстки в html и css появилось множество улучшений, которые заменяют ее собой. Проблема табличной верстки в том, что с ней не добиться адаптивности (или весьма тяжело добиться). При изменении содержимого какой либо ячейки происходит пересчет всей таблицы (расходует ресурсы). Табличную верстку сложнее поддерживать.
Таким образом использовать верстку на основе таблиц не рационально.
Таблицы лучше использовать по их прямому назначению — для отображения таблиц. Табличную верстку можно применять, например, при печати странички.
2. Как объединять ячейки внутри элемента с display: table-row?
В css нет аналога colspan , поэтому ваш header отображается в одной колонке а не занимает две.
3. Почему header c классом .row в коде ниже не заполняет всю ширину таблицы?
По той же причине, что и предыдущем пункте.
Скорее всего ваша задача может быть решена без использования табличной верстки.
Если вам требуется центрировать содержимое по горизонтали, то есть margin , position: absolute , flexbox , text-align для inline-block и другие возможности в зависимости от конкретной задачи и требований к совместимости с различными браузерами.
Для вертикального позиционирования вы так же можете использовать flexbox , position: absolute , оборачивание в контейнер с display: table-cell; совместно с vertical-align , line-height для однострочного текста и другие методы в зависимости от конкретной задачи.
Источник
Why is width: 100% not working on div ?
I’m trying to vertically and horizontally center some content overlaying an image slide (flexslider). There were some similar questions to this one, but I couldn’t find a satisfactory solution that applied directly to my specific problem. Because of the limitations of FlexSlider, I cannot use position: absolute; on the img tag in my implementation.
I almost have workaround below working. The only problem is I cannot get the width & height declarations to work on inner-wrapper div with the display: table-cell property.
Is this standard behavior, or am I missing something with my code? If it’s standard behavior, what’s the best solution to my problem?
HTML
CSS
Note: the centered content will be more than 1 element, so I can’t use the line-height trick.
7 Answers 7
Putting display:table; inside .outer-wrapper seemed to work.
EDIT: Two Wrappers Using Display Table Cell
I would comment on your answer but i have too little rep 🙁 anyways.
Going off your answer, seems like all you need to do is add display:table; inside .outer-wrapper (Dejavu?), and you can get rid of table-wrapper whole-heartedly.
But yeah, the position:absolute lets you place the div over the img , I read too quickly and thought that you couldn’t use position:absolute at all, but seems like you figured it out already. Props!
I’m not going to post the source code, after all its 99% timshutes’s work, so please refer to his answer, or just use my jsfiddle link
Update: One Wrapper Using Flexbox
It’s been a while, and all the cool kids are using flexbox:
Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block , inline , list-item и none . Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.
Табл. 1. Поддержка браузерами значений display
Значение
Описание
IE6
IE7
IE8
Cr2
Cr8
Op9.2
Op10
Sa3.1
Sa5
Fx3
Fx4
block
Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега , заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline
Элемент отображается как встроенный. Использование блочных тегов, таких как
, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block
Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега ). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-table
Определяет, что элемент является таблицей как при использовании тега
, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-item
Элемент выводится как блочный и добавляется маркер списка.
none
Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
run-in
Устанавливает элемент как блочный или встроенный в зависимости от контекста.
table
Определяет, что элемент является блочной таблицей подобно использованию тега
.
table-caption
Задает заголовок таблицы подобно применению тега .
table-cell
Указывает, что элемент представляет собой ячейку таблицы (тег
или
).
table-column
Назначает элемент колонкой таблицы, словно был добавлен тег .
table-column-group
Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега .
table-footer-group
Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега .
table-header-group
Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега .
table-row
Элемент отображается как строка таблицы (тег
).
table-row-group
Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега
поддержка значений table-footer-group и table-header-group происходит только для тегов и ;
для элементов
понимает значение block как list-item ;
значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.
Opera 9.2, а также Firefox 2.0:
значение table-column применяется только для тега ;
значение table-column-group поддерживается только для тега .
Chrome 2.0, а также Safari версии 3 и старше, iOS:
значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline .
Значение table-cell не работает, если нет элементов со значениями свойства display : table и table-row .
Разметка «Holy Grail»
