Как должен работать CSS «display: table-column»?

В HTML таблицы состоят из строк, каждая строка содержащие клетки. CSS расширяет эту концепцию, позволяя дизайнерам определять конкретные макеты строк и столбцов. В то время как «display: table-row» и «display: table-cell» просты, «display: table-column» имеет более тонкую цель.

Понимание функции «display: table- columns"

В отличие от "display: table-row" и "display: table-cell", "display: table-column" не устанавливает новую структуру столбца. Вместо этого он устанавливает атрибуты для ячеек в существующих строках таблицы. Например, вы можете указать цвет фона первой ячейки в каждой строке.

HTML и структура таблицы CSS

Чтобы понять эту концепцию, рассмотрите следующий HTML-код. таблица:

Cell 1
    
Cell 2
  
Cell 3
    
Cell 4
  

В соответствии со структурой HTML можно применить следующий CSS:

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

В этом примере элементы div «.column1» и «.column2» не являются контейнерами для контента. Они просто определяют атрибуты для ячеек в строках таблицы.

Ключевые моменты, которые следует запомнить

• "display: table-column" устанавливает атрибуты для ячеек в строках таблицы. , а не для самих столбцов.
• Базовая структура таблицы остается такой же, как в HTML, при этом ячейки являются дочерними элементами строк.
• "display: table-column" не обеспечивает механизм для нескольких - макеты столбцов, где контент перемещается между столбцами.