table-layout ⚡️ HTML и CSS с примерами кода
Свойство table-layout
определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.
Демо
Колонки и таблицы- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- border-collapse
- border-spacing
- caption-side
- empty-cells
- table-layout
- vertical-align
Синтаксис
/* Keyword values */ table-layout: auto; table-layout: fixed; /* Global values */ table-layout: inherit; table-layout: initial; table-layout: revert; table-layout: revert-layer; table-layout: unset;
Значения
auto
- Браузер загружает всю таблицу, анализирует её для определения размеров ячеек и только после этого отображает.
fixed
- Ширина колонок в этом случае определяется либо с помощью тега
<col>
, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
Значение по-умолчанию: auto
Применяется к тегу <table>
display
установлено как table
или inline-table
.Спецификации
- Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
- CSS Level 2 (Revision 1)
Поддержка браузерами
Описание и примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>table-layout</title> <style> table { table-layout: fixed; /* Фиксированная ширина ячеек */ width: 100%; /* Ширина таблицы */ } . col1 { width: 160px; } .coln { width: 60px; } </style> </head> <body> <table border="1"> <col /> <col span="9" /> <tr> <td></td> <td>2012</td> <td>2013</td> <td>2014</td> <td>2015</td> <td>2016</td> <td>2017</td> <td>2018</td> <td>2019</td> <td>2020</td> </tr> <tr> <td>Нефть</td> <td>5</td> <td>7</td> <td>2</td> <td>8</td> <td>3</td> <td>34</td> <td>62</td> <td>74</td> <td>57</td> </tr> <tr> <td>Золото</td> <td>3</td> <td>6</td> <td>4</td> <td>6</td> <td>4</td> <td>69</td> <td>72</td> <td>56</td> <td>47</td> </tr> <tr> <td>Дерево</td> <td>5</td> <td>8</td> <td>3</td> <td>4</td> <td>7</td> <td>73</td> <td>79</td> <td>34</td> <td>86</td> </tr> </table> </body> </html>
Границы таблиц — Учебник CSS — schoolsw3.
com❮ Назад Далее ❯
Внешний вид HTML-таблицы может быть значительно улучшен с помощью CSS:
Company | Contact | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Berglunds snabbköp | Christina Berglund | Sweden |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Königlich Essen | Philip Cramer | Germany |
Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Попробуйте сами »
Границы таблицы
Чтобы указать границы таблицы в CSS, используйте свойство border
.
Приведенный ниже пример задает сплошную границу для элементов <table>, <th> и <td>:
Фамилия | Имя |
---|---|
Щипунов | Андрей |
Щипунова | Кристина |
Пример
table, th, td {
border: 1px solid;
}
Попробуйте сами »
Таблица во всю ширину
Приведенная выше таблица в некоторых случаях может показаться небольшой. Если вам нужна таблица, которая должна занимать весь экран (во всю ширину), добавьте width: 100%
к элементу <таблица>:
Фамилия | Имя |
---|---|
Щипунов | Андрей |
Щипунова | Кристина |
Пример
table {
width: 100%;
}
Попробуйте сами »
Двойные границы
Обратите внимание, что таблица в приведенных выше примерах имеет двойные границы. Это связано с тем, что как таблица, так и элементы <th> и <td> имеют отдельные границы.
Чтобы удалить двойные границы, взгляните на приведенный ниже пример.
Свернуть границы таблицы
Свойство border-collapse
задает, следует ли сворачивать границы таблицы в единую границу:
Фамилия | Имя |
---|---|
Щипунов | Андрей |
Щипунова | Кристина |
Пример
table
{
border-collapse: collapse;
}
Попробуйте сами »
Если вам нужна только граница вокруг таблицы, укажите только свойство
для <table>:
Фамилия | Имя |
---|---|
Щипунов | Андрей |
Щипунова | Кристина |
Пример
table
{
border: 1px solid;
}
Попробуйте сами »
❮ Назад Далее ❯
Таблицы W3.
CSS❮ Назад Следующий ❯
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Джонсон | 67 | |
Бо | Нильссон | 50 |
Майк | Росс | 35 |
Классы таблиц W3.CSS
W3.CSS предоставляет следующие классы для таблиц:
Класс | Определяет |
---|---|
w3-таблица | Контейнер для таблицы HTML |
w3 полосатый | Полосатый стол |
w3-граница | Стол с окантовкой |
с рамкой w3 | Линии с границами |
w3 по центру | Содержимое таблицы по центру |
w3-hoverable | Подвижный стол |
w3-таблица-все | Набор всех свойств |
Базовая таблица
Класс w3-table используется для отображения базовой таблицы:
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Полосатая таблица
Класс w3-striped используется для добавления полос в таблицу:
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
<стол>
Попробуйте сами »
Полосатый стол с каймой
Объедините класс w3-striped и класс w3-bordered для создания таблицы с полосатой границей:
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Бо | Нильсон | 35 |
Пример
Имя Фамилия
Очки
Попробуйте сами »
Центрирование всего содержимого
Класс w3-centered центры содержание таблицы:
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
<таблица>
Попробуйте сами »
Выравнивание по правому краю одного столбца
Класс w3-right-align выравнивает по правому краю содержимое столбец:
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки |
---|
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
<таблица>
Попробуйте сами »
Цвета при наведении
Если вам нужен определенный цвет при наведении, добавьте любой из w3-hover- цвет 906 94 классов каждому элементу
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Попробуйте сами »
Объединение классов W3.
CSSМногие классы W3.CSS можно использовать для всех элементов HTML.
Например: классы границ, классы цветов, классы шрифтов, классы карт и более.
Цветной заголовок таблицы
Используйте любой из w3- color классы для отображения цветной строки:
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Попробуйте сами »
Цветная таблица
Используйте любой из классов w3- color для отображения цветной таблицы: 9000 3
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки |
---|---|---|---|---|---|---|---|---|---|---|---|---|
Джилл | Смит | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
Ева | Джексон | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
Адам | Джонсон | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Пример
Попробуйте сами »
Таблица как карточка
Используйте класс w3-card для отображения таблицы в виде карточки:
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Джилл | Смит | 50 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Ева | Джексон | 94 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Адам | Джонсон | 67 | Пример:
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия | Очки |
---|---|---|
Джилл | Смит | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Пример
Имя | Фамилия |
---|---|
Джилл | Смит |
Ева | Джексон |
Адам | Джонсон |
Пример
<таблица>
Попробуйте сами »
❮ Предыдущая Следующая ❯
Таблицы CSS Tailwind — бесплатные примеры и руководство
Используйте компонент адаптивной таблицы со вспомогательными примерами для ширины столбца таблицы, таблиц с границами и полосами, нумерации страниц, фиксированного заголовка, переполнения, интервалов и т. д.
Базовый пример
Используйте следующий пример компонента адаптивной таблицы, чтобы показать несколько строки и столбцы текстовых данных.
# | Первый | Последний | Ручка |
---|---|---|---|
1 | Марка | Отто | @mdo |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри | Дикий |
<дел> <дел> <дел> <дел> <таблица># Первый Последний Дескриптор <тд>1 Отметить Отто @mdo <тд>2 Джейкоб Торнтон @толстый <тд>3 Ларри Дикий @твиттер
Привет 👋 мы хотим сделать Tailwind Elements общественный проект. Это с открытым исходным кодом и бесплатно , и мы хотели бы, чтобы так и оставалось. Если вам это нравится, помогите проекту развиваться, поделившись им со своими коллегами. Каждая акция на счету , спасибо!
Поделиться через Dev.to Поделиться через Twitter Поделиться через Facebook Поделиться через Pinterest Поделиться через Reddit Поделиться через StumbleUpon Поделиться через Вконтакте Поделиться через Weibo Поделиться через HackerNews Поделиться через Gmail Поделиться по электронной почте
Варианты
Ниже приведены цветовые вариации, которые можно использовать в табличном компоненте.
Класс | Товарная позиция | Товарная позиция |
---|---|---|
По умолчанию | Сотовый | Сотовый |
Первичный | Сотовый | Сотовый |
Среднее | Сотовый | Сотовый |
Успех | Сотовый | Сотовый |
Опасность | Сотовый | Сотовый |
Предупреждение | Сотовый | Сотовый |
Информация | Сотовый | Сотовый |
Легкий | Сотовый | Сотовый |
Темный | Сотовый | Сотовый |
<дел> <дел> <дел> <дел> <таблица>Класс Заголовок Заголовок <тд> По умолчанию <тр > <тд> НачальныйЯчейка Ячейка Ячейка Ячейка <тр > <тд> СреднееЯчейка Ячейка <тр > <тд> УспехЯчейка Ячейка <тр > <тд> ОпасностьЯчейка Ячейка <тр > <тд> ПредупреждениеЯчейка Ячейка <тр > <тд> ИнформацияЯчейка Ячейка <тр > <тд> СветЯчейка Ячейка <тр > <тд> ТемныйЯчейка Ячейка
В полоску
Используйте этот пример, чтобы повысить читаемость наборов данных, чередуя цвета фона каждой второй строки таблицы.
# | Первый | Последний | Ручка |
---|---|---|---|
1 | Марка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица |
<дел> <дел> <дел> <дел> <таблица><тр > <тд>1 # Первый Последний Дескриптор Отметить Отто @mdo <тр > <тд>2Джейкоб Торнтон @толстый <тр > <тд>3 <тд колспан = "2" > Ларри Птица@твиттер
Hoverable
Используйте служебный класс hover:{bg-*}
, чтобы изменить
цвет фона строки данных при наведении курсора на элемент с
курсор.
# | Первый | Последний | Ручка |
---|---|---|---|
1 | Марка | Отто | @mdo |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри | Дикий |
<дел> <дел> <дел> <дел> <таблица><тр > <тд>1 # Первый Последний Дескриптор Отметить Отто @mdo <тр > <тд>2Джейкоб Торнтон @толстый <тр > <тд>3Ларри Дикий @твиттер
окаймленный
Использование таблицы с рамкой позволяет визуально упорядочить данные. граница.
Добавьте класс .border для границ со всех сторон таблицы и ячеек.
# | Первый | Последний | Ручка |
---|---|---|---|
1 | Отметка | Отто | @mdo |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица |
<дел> <дел> <дел> <дел> <таблица ># Первый Последний Дескриптор <тд > 1 <тд > Отметка <тд > Отто @mdo <тд > 2 <тд > Джейкоб <тд > Торнтон @толстый <тд > 3 <тд колспан = "2" > Ларри Птица @твиттер
без границ
Таблица без полей полезна для макетов, где важна легкость, и мы не будет помещать много данных в свою структуру.
# | Первый | Последний | Ручка |
---|---|---|---|
1 | Марка | Отто | @мдо |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица |
<дел> <дел> <дел> <дел> <таблица># Первый Последний Дескриптор <тд>1 Отметить Отто @mdo <тд>2 Джейкоб Торнтон @толстый <тд>3 <тд colspan="2"> Ларри Птица @твиттер
Маленький
Используйте small table, чтобы сделать таблицы более компактными, сократив отступы ячеек вдвое.
# | Первый | Последний | Ручка |
---|---|---|---|
1 | Марка | Отто | @mdo |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица |
<дел> <дел> <дел> <дел> <таблица># Первый Последний Дескриптор <тд>1 Отметить Отто @mdo <тд>2 Джейкоб Торнтон @толстый <тд>3 <тд colspan="2"> Ларри Птица @твиттер
Легкая голова
Используйте класс . bg-neutral-50
, чтобы сделать главный стол светлым.
# | Первый | Последний | Ручка |
---|---|---|---|
1 | Марка | Отто | @mdo |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица |
<дел> <дел> <дел> <дел> <таблица># Первый Последний Дескриптор <тд>1 Отметить Отто @mdo <тд>2 Джейкоб Торнтон @толстый <тд>3 <тд colspan="2"> Ларри Птица @твиттер
Темная голова
Используйте класс . bg-neutral-800
, чтобы сделать главный стол темным.
# | Первый | Последний | Ручка |
---|---|---|---|
1 | Марка | Отто | @mdo |
2 | Джейкоб | Торнтон | @толстый |
3 | Ларри Птица |
<дел> <дел> <дел> <дел> <таблица># Первый Последний Дескриптор <тд>1 Отметить Отто @mdo <тд>2 Джейкоб Торнтон @толстый <тд>3 <тд colspan="2"> Ларри Птица @твиттер
Всегда отзывчивый
Адаптивная таблица будет отображать горизонтальную полосу прокрутки, если экран слишком маленький, чтобы отобразить все содержимое.