CSS display table

CSS-свойство display: table и другие, делают вывод группы элементов подобно таблице <table>, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.

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

display: table; <table>
display: inline-table; <table> но с display: inline-block
display: table-caption; <caption>
display: table-column-group; <colgroup>
display: table-column; <col>
display: table-header-group; <thead>
display: table-row-group; <tbody>
display: table-footer-group; <tfoot>
display: table-row; <tr>
display: table-cell; <td> или <th>
13.08.2019, обновлено 17.09.2021
17000
Предыдущая запись Колоночные шаблоны

Комментарии 2

Дмитрий Степанович Дмитрий Степанович
2 мая 2020 в 19:18
-2
Привет. Прочитал вашу статью в надежде найти ответ на свой вопрос. Нужно сверстать таблицу на div-ах, но не могу выставить ширину колонок. У Вас в примере последнем, где выставляется ширина:
<div class="table-colgroup">
<div class="table-col" width="10%"></div>
<div class="table-col" width="30%"></div>
<div class="table-col" width="30%"></div>
<div class="table-col" width="30%"></div>
</div>
тоже колонки не принимают нужные ширины в 10, 30, 30 и 30%. Или я что-то не правильно понимаю?
Tichosuka ticho Tichosuka ticho
3 августа 2020 в 00:25
+1
Автор ошибся, так работать не будет, т.к. атрибут width не применим к div (https://www.w3schools.com/tags/att_width.asp). Надо так:
<div class="table-col" style="width: 10%;"></div>

, чтобы добавить комментарий.

Другие публикации

Одна рамка между блоками
Несколько вариантов как схлопнуть (объединить) границы у рядом стоящих блоков.
7898
+1
Шахматное поле на CSS
Приемы как сделать шахматную сетку на псевдо-свойстве :nth-child().
15495
0
Вывод массива колонками
Несколько примеров как вывести одномерный PHP-массив в виде таблицы, плиток и списком в несколько колонок. Имеем массив городов...
9034
+3
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
38691
+24
Создание товарной накладной в PHPExcel
Пример, как сформировать товарную накладную с помощью библиотеки PHPExcel. В результате получится файл в формате xlsx...
14411
+5
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
64406
+21