Отображение макета таблицы: магия таблицы

внешний интерфейс алгоритм HTML CSS
Когда дело доходит до разметки стола, я считаю, что первое, что приходит вам на ум, это<table>Метки, по сути, также обеспечивают макет таблицы в CSS2:display: table, только сегодня пользовался, надо досконально изучить!

Хотя CSS3 появилсяdisplay： flex(Гибкая компоновка)а такжеdisplay: grid(CSS: макет сетки), но они по-прежнему совместимы и полезны при использованииdisplay: table, вы обнаружите, что есть еще много применений.
Сначала взглянитеdisplay: tableСовместимость:


Как видите, если вы не хотите конкурировать с IE6/7, отобразите: таблице не нужно учитывать совместимость.

Далее, давайте взглянем на необязательное значение отображения таблицы:
  • table: определяет объект как таблицу на уровне элемента блока, что эквивалентно тегу html.<table>
  • inline-table: определяет объект как встроенную таблицу уровня элемента, эквивалентную HTML-тегу.<table>
  • table-caption: Укажите объект в качестве заголовка таблицы, эквивалентного тегу html.<caption>
  • table-cell: указать объект как ячейку таблицы, эквивалентную HTML-тегу.<td>
  • table-row: Укажите объект как строку таблицы, эквивалентную тегу html.<tr>
  • table-row-group: Укажите объект как группу строк таблицы, эквивалентную тегу html.<tbody>
  • table-column: указать объект как столбец таблицы, эквивалентный тегу html.<col>
  • table-column-group: указанный объект отображается как группа столбцов таблицы, что эквивалентно тегу html.<colgroup>
  • table-header-group: укажите объект в качестве группы заголовков таблицы, эквивалентной тегу html.<thead>
  • table-footer-group: укажите объект как группу нижнего колонтитула таблицы, эквивалентную тегу html.<tfoot>

Есть также некоторые вспомогательные свойства:
  • border-collpase: Используется для определения того, разделены ли границы таблицы или объединены. В режиме разделения соседние ячейки имеют отдельные границы. В режиме слияния соседние ячейки имеют общие границы.
  • border-spacing: задает расстояние между соседними границами ячеек (доступно только в режиме разделения границ). Эквивалентно атрибуту cellpacing в HTML, но можно использовать второе необязательное значение для установки интервала по вертикали, отличного от интервала по горизонтали.
  • table-layout: определяет алгоритм размещения ячеек таблицы, строк и столбцов. (авто: ширина таблиц и ячеек зависит от содержимого, которое они содержат. фиксировано: ширина таблиц и столбцов задается шириной таблицы, а ширина столбца определяется только ячейками в первой строке таблицы). колонка.)
  • vertical-align: используется для указания вертикального выравнивания встроенных элементов или элементов ячейки таблицы.

Как видно из приведенных выше свойств, нет необходимости<table>label, мы можем полностью реализовать макет таблицы.
Вот четыре примера:
  • Адаптивный макет
  • Автоматически заполнить оставшееся пространство
  • Динамическое вертикальное выравнивание по центру
  • Динамическое горизонтальное выравнивание по центру

&amp;amp;amp;lt;br&amp;amp;amp;gt;
Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение в разделе комментариев ниже!


Категории