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, обновлено 19.03.2020
Предыдущая запись Колоночные шаблоны

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

Дмитрий Степанович Дмитрий Степанович
2 мая 2020 в 19:18
0
Привет. Прочитал вашу статью в надежде найти ответ на свой вопрос. Нужно сверстать таблицу на 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
0
Автор ошибся, так работать не будет, т.к. атрибут width не применим к div (https://www.w3schools.com/tags/att_width.asp). Надо так:
<div class="table-col" style="width: 10%;"></div>

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

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

Несколько вариантов как схлопнуть (объединить) границы у рядом стоящих блоков.
2232
0
Приемы как сделать шахматную сетку на псевдо-свойстве :nth-child().
7714
0
Несколько примеров как вывести одномерный PHP-массив в виде таблицы, плиток и списком в несколько колонок. Имеем массив городов...
2420
+1
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
30976
+8
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
25456
+17
Пример, как сформировать товарную накладную с помощью библиотеки PHPExcel. В результате получится файл в формате xlsx...
10462
+2