Как должен работать CSS "display: таблица-столбец"?

ProgramBox

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

Post author:admin
Запись опубликована:10 марта, 2023
Post category:Вопросы по программированию

#css #tablelayout #css-tables

#css #tablelayout #css-таблицы

Вопрос:

Учитывая следующие HTML и CSS, я абсолютно ничего не вижу в своем браузере (последние версии Chrome и IE на момент написания статьи). Все сворачивается до 0x0 пикселей. Почему?

 <!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        section { display: table; height: 100%; background-color: grey; }

        #colLeft { display: table-column; height: 100%; background-color: green; }
        #colRight { display: table-column; height: 100%; background-color: red; }

        #row1 { display: table-row; height: 100%; }
        #row2 { display: table-row; height: 100%; }
        #row3 { display: table-row; height: 100%; }

        #cell1 { display: table-cell; height: 100%; }
        #cell2 { display: table-cell; height: 100%; }
        #cell3 { display: table-cell; height: 100%; }
    </style>
</head>
<body>
    <section>
        <div id="colLeft">
            <div id="row1">
                <div id="cell1">
                    AAA
                </div>
            </div>
            <div id="row2">
                <div id="cell2">
                    BBB
                </div>
            </div>
        </div>
        <div id="colRight">
            <div id="row3">
                <div id="cell3">
                    CCC
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Ответ №1:

Модель таблицы CSS основана на модели таблицы HTML http://www.w3.org/TR/CSS21/tables.html

Таблица разделена на СТРОКИ, и каждая строка содержит одну или несколько ячеек. Ячейки являются дочерними элементами СТРОК, они НИКОГДА НЕ являются дочерними элементами столбцов.

«display: table-column» не предоставляет механизма для создания столбчатых макетов (например, газетных страниц с несколькими столбцами, где содержимое может перетекать из одного столбца в другой). столбец).

Скорее, «таблица-столбец» УСТАНАВЛИВАЕТ ТОЛЬКО атрибуты, которые применяются к соответствующим ячейкам в строках таблицы. Например. Можно описать «Цвет фона первой ячейки в каждой строке — зеленый».

Сама таблица всегда структурирована так же, как и в HTML.

В HTML (обратите внимание, что «td» находятся внутри «tr», А НЕ внутри «col»):

 <table ..>
  <col .. />
  <col .. />
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
</table>

Соответствующий HTML с использованием свойств таблицы CSS (обратите внимание, что divs «column» не содержат никакого содержимого — стандарт не допускает содержимого непосредственно в столбцах):

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

 <div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow">
    <div class="mycell">contents of first cell in row 1</div>
    <div class="mycell">contents of second cell in row 1</div>
  </div>
  <div class="myrow">
    <div class="mycell">contents of first cell in row 2</div>
    <div class="mycell">contents of second cell in row 2</div>
  </div>
</div>

НЕОБЯЗАТЕЛЬНО: как «строки», так и «столбцы» можно стилизовать, назначив несколько классов каждой строке и ячейке следующим образом. Этот подход обеспечивает максимальную гибкость при указании различных наборов ячеек или отдельных ячеек для стилизации:

 //Useful css declarations, depending on what you want to affect, include:

/* all cells (that have "class=mycell") */
.mycell {
}

/* class row1, wherever it is used */
.row1 {
}

/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}

/* cell1 of row1 */
.row1 .cell1 {
}

/* cell1 of all rows */
.cell1 {
}

/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}

/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}

/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}

/* cell1 of all rows of a mytable */
.mytable .cell1 {
}

 <div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow row1">
    <div class="mycell cell1">contents of first cell in row 1</div>
    <div class="mycell cell2">contents of second cell in row 1</div>
  </div>
  <div class="myrow row2">
    <div class="mycell cell1">contents of first cell in row 2</div>
    <div class="mycell cell2">contents of second cell in row 2</div>
  </div>
</div>

В современных гибких конструкциях, которые используются <div> для разных целей, разумно поместить некоторый класс в каждый div, чтобы помочь ссылаться на него. Здесь то, что раньше было <tr> в HTML, стало class myrow и <td> стало class mycell . Это соглашение делает вышеупомянутые селекторы CSS полезными.

ПРИМЕЧАНИЕ ПО ПРОИЗВОДИТЕЛЬНОСТИ: размещение имен классов в каждой ячейке и использование вышеупомянутых селекторов нескольких классов обеспечивают лучшую производительность, чем использование селекторов, заканчивающихся на * , например , .row1 * или даже .row1 > * . Причина в том, что селекторы сначала сопоставляются последними, поэтому, когда ищутся соответствующие элементы, .row1 * сначала выполняется * , который сопоставляет все элементы, а затем проверяет всех предков каждого элемента, чтобы найти, есть ли у какого-либо предка class row1 . Это может быть медленным в сложном документе на медленном устройстве. .row1 > * лучше, потому что проверяется только непосредственный родительский элемент. Но гораздо лучше сразу исключить большинство элементов, через .row1 .cell1 . ( .row1 > .cell1 это еще более жесткая спецификация, но это первый шаг поиска, который имеет наибольшее значение, поэтому обычно не стоит беспорядка и дополнительного процесса размышления о том, всегда ли он будет прямым дочерним элементом, добавления дочернего селектора > .)

Ключевым моментом для снижения производительности re является то, что последний элемент в селекторе должен быть как можно более конкретным и никогда не должен быть * .

1. Я сам этого не пробовал, но я видел рекомендации для tanalin.com/en/projects/display-table-htc который является решением javascript для IE6 и IE7. Когда запускается javascript, он преобразует страницу в более старые теги таблицы HTML.

2. Решение работает на IE8 , Firefox, Chrome, iPad, Android. Это хороший способ избежать макетов таблиц, если вам нужна гибкая структура таблицы, и вы поддерживаете более современные браузеры, перечисленные выше.

3. это <col style="color: red;" > не работает, но <col style="background-color: red;" > все в порядке! что в этом плохого?

4. @xgqfrms: какое-то другое правило css должно переопределять цвет. Вероятно, правило, применяемое к элементу внутри ваших ячеек. Например, если ваш текст находится внутри <p> , то где-то у вас есть более конкретное правило настройки <p> цвета. Попробуйте <col style="color: red !important;"> . Если это работает, то в этом проблема. Однако не стоит злоупотреблять !important . Увидев эту работу, лучше всего удалить ее и определить более конкретный селектор, который будет иметь приоритет. google «css более конкретный селектор» или см. smashingmagazine.com/2007/07 /…

Ответ №2:

Тип отображения «таблица-столбец» означает, что он действует как <col> тег в HTML, то есть невидимый элемент, ширина которого * определяет ширину соответствующего физического столбца заключающей таблицы.

См. Стандарт W3C для получения дополнительной информации о модели таблиц CSS.

* И несколько других свойств, таких как границы, фоны.

1. Если col элемент имеет логическую структуру, что он и делает, то как оправдать использование правила CSS display: table-column; , которое имеет только презентационную структуру? Согласно спецификациям на display ( w3.org/wiki/CSS/Properties/display ), предполагается, что он должен «вести себя» как col элемент. Но я не вижу, как это полезно…

2. @TestSubject528491 Потому что тогда вы можете установить фон столбца, ширину столбца и т. Д. Для [презентационной] таблицы. Но на самом деле это в основном полезно с точки зрения указания правила стиля по умолчанию для самого <col> тега или эквивалентного тега на другом языке разметки на основе XML.

3.@chharvey: HTML — это col логический элемент, который содержит только презентационный стиль. Вы не можете поместить в него столбец с информацией — это распространенное недоразумение. Данные таблицы всегда находятся в строках. display: table-column; преобразует логический элемент (обычно a div ) в a col . Это приводит к тому, что другие поля стиля, назначенные этому элементу, применяются к концепции представления «столбец». Результатом является логический элемент, который не отображается и содержимое которого, если таковое имеется, игнорируется; его единственным эффектом является применение стиля к «столбцам» связанной презентации. Смотрите Мой ответ для шаблона.