Css таблица: Стилизация таблиц — Изучение веб-разработки

Leave a Comment / Css / By /

table-layout — Справочник CSS

❮ Назад CSS Справочник Далее ❯


Пример

Установка различных алгоритмов сервировки таблиц:

table.a {
    table-layout: auto;
    width: 180px;
}

table.b {
    table-layout: fixed;
    width: 180px;
}

Попробуйте сами »

Определение и использование

Свойство table-layout определяет алгоритм, используемый для компоновки ячеек таблицы, строк и столбцов.

Совет: Основное преимущество table-layout: fixed; заключается в том, что таблица визуализируется намного быстрее. В больших таблицах пользователи не увидят ни одной части таблицы, пока браузер не отобразит всю таблицу. Таким образом, если вы используете table-layout: fixed, пользователи будут видеть верхнюю часть таблицы, пока браузер загружает и отображает остальную часть таблицы. Это создает впечатление, что страница загружается намного быстрее!

Значение по умолчанию:auto
Унаследованный:нет
Анимируемый:нет. Прочитать о animatable
Версия:CSS2
JavaScript синтаксис:object.style.tableLayout=»fixed» Попробовать

Поддержка браузеров

Числа в таблице указывают первая версия браузер, который полностью поддерживает свойство.

Свойство
table-layout14.05.01.01.07.0

CSS Синтаксис

table-layout: auto|fixed|initial|inherit;

Значения свойств

ЗначениеОписаниеВоспроизвести
autoБраузеры используют автоматический алгоритм компоновки таблиц. Ширина столбца задается самым широким неразрывный содержимым в ячейках. Содержание будет диктовать макет Воспроизвести »
fixedЗадает фиксированный алгоритм компоновки таблицы. ширина таблицы и столбца определяется шириной таблицы, а цвет, шириной первой строки ячеек. Ячейки в других строках не влияют на ширину столбцов. Если нет ширины присутствуют в первой строке, ширины столбцов делятся поровну по всей таблице, независимо от содержимого внутри ячеекВоспроизвести »
initialУстанавливает это свойство в значение индекса. Прочитать о initialВоспроизвести »
inheritНаследует это свойство от родительского элемента. Прочитать о inherit

Связанные страницы

CSS Учебник: CSS Таблица

HTML DOM Справочник: Свойство tableLayout

❮ Назад CSS Справочник Далее ❯

Макет таблицы — Tailwind CSS

​Основы использования

​Авто

Используйте

table-auto, чтобы разрешить таблице автоматически изменять размер столбцов в соответствии с содержимым ячейки.

ПесняАртистГод
The Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961
Witchy WomanThe Eagles1972
Shining StarEarth, Wind, and Fire1975
<table>
  <thead>
    <tr>
      <th>Песня</th>
      <th>Артист</th>
      <th>Год</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

​Фиксированный

Используйте table-fixed, чтобы таблица игнорировала содержимое и использовала фиксированную ширину для столбцов. Ширина первой строки задает ширину столбца для всей таблицы.

Вы можете вручную установить ширину для некоторых столбцов, а остальная доступная ширина будет равномерно разделена между столбцами без явной ширины.

ПесняАртистГод
The Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961
Witchy WomanThe Eagles1972
Shining StarEarth, Wind, and Fire1975
<table>
  <thead>
    <tr>
      <th>Песня</th>
      <th>Артист</th>
      <th>Год</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:table-fixed, чтобы применять утилиту table-fixed только при hover.

<table>
  <!-- ... -->
</table>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:table-fixed

, чтобы применить утилиту table-fixed только на экранах среднего размера и выше.

<table>
  <!-- ... -->
</table>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

Таблица — Компоненты CSS Tailwind

Таблица может использоваться для отображения списка данных в табличном формате.

Имя класса Тип
стол Компонент Для элемента
стол-зебра

Модификатор

 Для в строки полос зебры для выделения текущей строки
для выделения текущей строки при наведении
активный

Модификатор

 Для
наведение

Модификатор

 Для
настольный обычный

Отзывчивый

 Обычные прокладки
компактный стол

Отзывчивый

 Компактные прокладки

# Таблица

Имя Работа Любимый цвет
1 Сай Гандертон Специалист по контролю качества Синий
2 Харт Хагерти Техник по поддержке настольных компьютеров Фиолетовый
3 Брайс Свайр Налоговый бухгалтер Красный

# Таблица с активной строкой

Имя Работа Любимый цвет
1 Сай Гандертон Специалист по контролю качества Синий
2 Харт Хагерти Техник по поддержке настольных компьютеров Фиолетовый
3 Брайс Свайр Налоговый бухгалтер Красный

# Таблица со строкой, которая выделяется при наведении курсора

Имя Работа Любимый цвет
1 Сай Гандертон Специалист по контролю качества Синий
2 Харт Хагерти Техник по поддержке настольных компьютеров Фиолетовый
3 Брайс Свайр Налоговый бухгалтер Красный

# Зебра

Имя Работа Любимый цвет
1 Сай Гандертон Специалист по контролю качества Синий
2 Харт Хагерти Техник по поддержке настольных компьютеров Фиолетовый
3 Брайс Свайр Налоговый бухгалтер Красный

# Стол с визуальными элементами

Имя Работа Любимый цвет

Харт Хагерти

США

 Землак, Даниэль и Линнон
Техник по поддержке настольных компьютеров		 Фиолетовый

Брайс Свайр

Китай

 Кэрролл Групп
Налоговый бухгалтер		 Красный

Марьи Ференц

Россия

 Роу-Шен
Офисный помощник I		 малиновый

Янси Тир

Бразилия

 Вайман-Леднер
Специалист по связям с общественностью		 Индиго
Имя Работа Любимый цвет

# Компактный стол

Имя Работа компания местоположение Последний вход Любимый цвет
1 Сай Гандертон Специалист по контролю качества Литтел, Шаден и Вандерворт Канада 16. 12.2020 Синий
2 Харт Хагерти Техник по поддержке настольных компьютеров Земляк, Даниэль и Леаннон США 05.12.2020 Фиолетовый
3 Брайс Свайр Налоговый бухгалтер Кэрролл Групп Китай 15.08.2020 Красный
4 Марджи Ференц Офисный помощник I Роу-Шен Россия 25.03.2021 Малиновый
5 Слеза Янси Специалист по связям с общественностью Вайман-Леднер Бразилия 22.05.2020 Индиго
6 Ирма Василик Редактор Wiza, Bins и Emard Венесуэла 08.12.2020 Фиолетовый
7 Меган Дюртнал Штатный бухгалтер IV Шустер-Шиммель Филиппины 17. 02.2021 Желтый
8 Сэмми Сестон Бухгалтер I О’Хара, Уэлч и Киблер Индонезия 23.05.2020 Малиновый
9 Леся Тинхэм Техник по технике безопасности IV Тернер-Кульман Филиппины 21.02.2021 Бордовый
10 Занета Тьюксбери Вице-президент по маркетингу ООО «Зауэр» Чад 23.06.2020 Зеленый
11 Энди Типпл Библиотекарь Группа Хилперт Польша 09.07.2020 Индиго
12 Софи Байлз Менеджер по подбору персонала Гутманн Инк Индонезия 12.02.2021 Бордовый
13 Флорида Гарсес Веб-разработчик IV Гейлорд, Пакоча и Баумбах Польша 31. 05.2020 Фиолетовый
14 Марибет Поппинг Программист-аналитик Декоу-Пурос Португалия 27.04.2021 Аквамарин
15 Мориц Драйбург Стоматолог-гигиенист Шиллер, Коул и Хакетт Шри-Ланка 08.08.2020 Малиновый
16 Рид Семирас Учитель Спорер, Сайпс и Роган Польша 30.07.2020 Зеленый
17 Алек Летби Учитель Райхель, Гловер и Хэмилл Китай 28.02.2021 Хаки
18 Аланд Уилбер Специалист по контролю качества Кшлерин, Роган и Сванявски Чехия 29.09.2020 Фиолетовый
19 Тедди Дуэрден Штатный бухгалтер III Пурос, Ульрих и Виндлер Франция 27. 10.2020 Аквамарин
20 Лорелей Блэкстоун Координатор данных Виттинг, Катч и Гринфельдер Казахстан 03.06.2020 Красный
Имя Работа компания местоположение Последний вход Любимый цвет

Пред. Стат

Следующий Подсказка

У вас есть вопрос? спросите сообщество

Вы видите ошибку? открыть вопрос на GitHub

Поддержка разработки daisyUI: Open Collective

Редактировать эту страницу на GitHub

Спонсоры

Сделайте свой сайт React визуально редактируемым

Стать спонсором

столов | Винди CSS

Table

Утилита table ведет себя как элемент HTML

. Он определяет поле блочного уровня. Элемент таблицы представляет табличные данные, то есть информацию, представленную в двумерной таблице, состоящей из строк и столбцов ячеек, содержащих данные.

Встроенная таблица

Утилита встроенной таблицы не имеет прямого отображения в HTML. Он ведет себя как элемент HTML

, но как встроенный блок, а не блок уровня блока. Внутри табличного поля находится контекст уровня блока.

| встроенный стол | отображение: встроенная таблица; |

Table Caption

Утилита table-caption ведет себя как

. Элемент HTML определяет строку ячеек в таблице. Затем ячейки строки могут быть созданы с использованием комбинации элементов элемент HTML. HTML 9Элемент 0750 определяет столбец в таблице и используется для определения общей семантики для всех общих ячеек. Обычно он находится внутри элемента .

Table Row Group

Утилита table-row-group ведет себя как

элемент HTML. Элемент HTML Table Body () инкапсулирует набор строк таблицы ( элементов), указывая, что они составляют тело таблицы ().0749 <таблица> ).

Table Column Group

Утилита table-column-group ведет себя как

элемент HTML. Элемент HTML определяет группу столбцов в таблице.

Утилита table-header-group ведет себя как элемент

HTML. Элемент HTML определяет набор строк, определяющих заголовки столбцов таблицы.

Утилита table-footer-group ведет себя как элемент

HTML. Элемент HTML определяет набор строк, суммирующих столбцы таблицы.

Table Layout

Утилиты для управления алгоритмом верстки таблицы.

авто

фиксированный

Свертывание границ таблицы

Утилиты для управления свертыванием или разделением границ таблицы.

обрушение

отдельный

Сторона заголовка таблицы

Утилита caption помещает содержимое таблицы

элемент HTML. Элемент HTML определяет заголовок (или заголовок) таблицы.

Ячейка таблицы

Утилита table-cell ведет себя как HTML-элемент

. Элемент HTML определяет ячейку таблицы, содержащую данные. Он участвует в табличной модели.

Table Row

Утилита table-row ведет себя как HTML-элемент

(ячейка данных) и (ячейка заголовка).

Table Column

Утилита table-column ведет себя как

на указанную сторону. Значения относятся к режиму записи таблицы.

верх

низ

Пустые ячейки таблицы

Утилита empty-cells устанавливает, будут ли границы и фон появляться вокруг <таблицы> ячеек, не имеющих видимого содержимого.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *