Как и защо да използвате “display: table-cell” в CSS

Може да се забележи, че данните са добавени успешно:

Стъпка 2: Стилизирайте контейнера „съдържание на таблица“.

За достъп до главния div, използвайте „ #съдържание на таблица ', където ' # ” е селектор, използван за достъп до посочения „ документ за самоличност ” на контейнера div. След това приложете следните свойства:

Тук:

• • „ дисплей ” свойството дефинира и определя как изглежда даден елемент. За да направите това, стойността на това свойство е зададена като „ маса ” за изработване на масата.
  • “ подплата ” разпределя пространството вътре в контейнера.

Стъпка 3: Оформете контейнер „tr-div“.

Сега стилизирайте „ tr-div ” контейнер, както следва:

Според блока с код по-горе, „ дисплей ” стойността на свойството е зададена като „ маса-ред ”, което означава, че данните са зададени под формата на редове в таблица, “ Цвят на фона ” свойството се използва за указване на цвета от задната страна на елемента и накрая, „ подплата ' приложено е:

Стъпка 4: Приложете свойството „display: table-cell“ върху контейнера „td-div“

Достъп до третия div с помощта на „ .td-div ” селективна точка и съответния идентификатор и приложете свойствата на CSS, дадени по-долу:

• • Стойността на „ дисплей ” свойството е зададено като „ таблица-клетка ”, който се използва за създаване на клетката и добавяне на данни към клетката.
  • “ ширина ” определя размера на клетката на таблицата хоризонтално.
  • “ граница ” определя граница около клетките.
  • “ марж ” разпределя пространството извън дефинираната граница.
  • “ подплата ” указва пространството вътре в границата.

Изход

Защо да използвате “display: table-cell” в CSS?

„ дисплей: клетка-таблица ” Свойството CSS се използва за настройка на показване на данни, което кара елемента да се държи като таблица. Така потребителите могат да създадат дубликат на таблица в HTML, без да използват елемента table и други елементи, включително td и tr. По-конкретно, неговото свойство дефинира данните под формата на таблица.

Заключение

За да използвате „ дисплей: клетка-таблица ” CSS свойство, създайте вложени div контейнери и вмъкнете клас във всеки контейнер с конкретно име. След това влезте в контейнера div в CSS и приложете свойството „display: table-cell“, където „ дисплей ” се използва за задаване на данните в клетките на таблицата. Тази публикация демонстрира метода за използване на CSS свойството display:table-cell.