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

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

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

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

.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 — для ячеек. sky.pro

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