Как использовать CSS свойство display для создания таблиц?

Для использования CSS свойства display для создания таблиц нужно установить следующие значения:

• Для таблицы целиком — display: table. 4 Это создаст обёртку таблицы, которая будет действовать как контейнер для всей таблицы. 1
• Для строк — display: table-row. 14
• Для ячеек — display: table-cell. 14

Например, для создания таблицы меню на веб-странице кафе можно использовать следующий код: 1

.menu-table { display: table; border-collapse: collapse; width: 100%; }.menu-row { display: table-row; }.menu-item { display: table-cell; border: 1px solid black; padding: 10px; }

В этом примере класс .menu-table используется для создания обертки таблицы, .menu-row — для строк, .menu-item — для ячеек. 1

Недостающие элементы таблицы браузер будет автоматически достраивать, если достаточно только одного объявления вроде display: table или display: table-cell. 3