Существует несколько свойств CSS для стилизации элементов HTML. “ отображать ” — одно из них, которое используется для установки элемента, который управляется как встроенный элемент или блочный элемент. Кроме того, макет, используемый для его дочерних элементов, таких как поток, гибкость или сетка. Более того, это свойство выделяет внутренний и внешний типы для отображения элемента.
Этот пост объяснит:
Как использовать «display: table-cell» в CSS?
Чтобы использовать « отображать ” свойство со значением “ ячейка таблицы », попробуйте данные инструкции.
Шаг 1: Создайте вложенные контейнеры div
Сначала создайте основной контейнер div с помощью команды « <дел> » и вставьте « идентификатор ” внутри тега div. Затем между тегом div добавьте больше контейнеров и добавьте « сорт ” в каждом div:
< див идентификатор '=' 'содержимое таблицы' >
< див сорт '=' 'tr-div' >
< див сорт '=' 'тд-див' > Гарри див >
< див сорт '=' 'тд-див' > HTML / CSS див >
див >
< див сорт '=' 'tr-div' >
< див сорт '=' 'тд-див' > Эдвард див >
< див сорт '=' 'тд-див' > Докер див >
див >
< див сорт '=' 'tr-div' >
< див сорт '=' 'тд-див' > Джек див >
< див сорт '=' 'тд-див' > Гит див >
див >
див >
Можно заметить, что данные были успешно добавлены:
Шаг 2: Стиль контейнера «table-content»
Чтобы получить доступ к основному div, используйте « #таблица-контент ', где ' # ” – это селектор, используемый для доступа к указанному “ идентификатор ” атрибут контейнера div. Затем примените следующие свойства:
#содержимоетаблицы{дисплей: таблица;
отступ: 7px;
}
Здесь:
-
- “ отображать ” определяет и определяет, как выглядит элемент. Для этого значение этого свойства устанавливается как « стол » для изготовления стола.
- “ набивка ” выделяет пространство внутри контейнера.
Шаг 3: Стиль контейнера «tr-div»
Теперь стилизуйте « tr-div контейнер следующим образом:
.tr-div {отображение: таблица-строка;
цвет фона: rgb ( 164 , 241 , 215 ) ;
отступ: 7px;
}
Согласно приведенному выше кодовому блоку, « отображать ” значение свойства установлено как “ таблица-строка », что означает, что данные задаются в виде строк в таблице, « фоновый цвет » используется для указания цвета на задней стороне элемента, и, наконец, « набивка ' применены:
Шаг 4. Примените свойство display: table-cell к контейнеру td-div.
отображение: таблица-ячейка;
ширина: 150 пикселей;
граница: #0f4bf0 сплошной 1px;
поле: 5px;
отступ: 7px;
}
Доступ к третьему div с помощью « .td-div ” точка select и соответствующий идентификатор, и примените свойства CSS, указанные ниже:
-
- Значение “ отображать ” установлено как “ ячейка таблицы », который используется для создания ячейки и добавления данных в ячейку.
- “ ширина ” задает размер ячейки таблицы по горизонтали.
- “ граница ” определяет границу вокруг ячеек.
- “ допуск ” выделяет пространство за пределами определенной границы.
- “ набивка ” указывает пространство внутри границы.
Выход
Зачем использовать «display: table-cell» в CSS?
“ отображение: таблица-ячейка Свойство CSS используется для настройки отображения данных, благодаря которым элемент ведет себя как таблица. Таким образом, пользователи могут создать дубликат таблицы в HTML, не используя элемент table и другие элементы, включая td и tr. Точнее, его свойство определяет данные в виде таблицы.
Заключение
Чтобы использовать « отображение: таблица-ячейка », создайте вложенные контейнеры div и вставьте класс в каждый контейнер с определенным именем. Затем откройте контейнер div в CSS и примените свойство «display: table-cell», где « отображать ” используется для установки данных в ячейках таблицы. В этом посте продемонстрирован метод использования CSS-свойства display:table-cell.