Paano at Bakit Gamitin ang 'display: table-cell' sa CSS

Mapapansing matagumpay na naidagdag ang data:

Hakbang 2: Istilo ang 'table-content' na Container

Upang ma-access ang pangunahing div, gamitin ang ' #table-content ', saan' # ' ay isang tagapili na ginagamit para sa pag-access sa tinukoy na ' id ” attribute ng div container. Pagkatapos, ilapat ang mga sumusunod na katangian:

dito:

• • Ang ' display ” Tinutukoy at tinutukoy ng property ang hitsura ng isang elemento. Upang gawin ito, ang halaga ng property na ito ay itinakda bilang ' mesa ” para sa paggawa ng mesa.
  • “ padding ” naglalaan ng espasyo sa loob ng lalagyan.

Hakbang 3: Istilo ang 'tr-div' na Container

Ngayon, i-istilo ang “ tr-div ” lalagyan tulad ng sumusunod:

Ayon sa bloke ng code sa itaas, ang ' display 'Ang halaga ng ari-arian ay itinakda bilang ' table-row ” na nangangahulugang ang data ay nakatakda sa anyo ng mga hilera sa isang talahanayan, “ kulay ng background 'Ang ari-arian ay ginagamit para sa pagtukoy ng kulay sa likod ng elemento, at panghuli, ' padding ' ay inilapat:

Hakbang 4: Ilapat ang 'display: table-cell' Property sa 'td-div' Container

I-access ang ikatlong div sa tulong ng “ .td-div ” dot selective at ang kaukulang id, at ilapat ang mga katangian ng CSS na ibinigay sa ibaba:

• • Ang halaga ng ' display 'Ang ari-arian ay itinakda bilang ' mesa-cell ” na ginagamit para sa paggawa ng cell at pagdaragdag ng data sa cell.
  • “ lapad ” ay tumutukoy sa laki ng cell ng talahanayan nang pahalang.
  • “ hangganan ” ay tumutukoy sa isang hangganan sa paligid ng mga selula.
  • “ margin ” ang pag-aari ay naglalaan ng espasyo sa labas ng tinukoy na hangganan.
  • “ padding ” ay tumutukoy sa espasyo sa loob ng hangganan.

Output

Bakit Gumamit ng 'display: table-cell' sa CSS?

Ang ' display: table-cell ” Ginagamit ang CSS property para sa pagtatakda ng display sa data na ginagawang parang talahanayan ang elemento. Kaya, ang mga gumagamit ay maaaring lumikha ng isang duplicate ng isang talahanayan sa HTML nang hindi ginagamit ang elemento ng talahanayan at iba pang mga elemento, kabilang ang td at tr. Higit na partikular, ang kanyang ari-arian ay tumutukoy sa data sa anyo ng isang talahanayan.

Konklusyon

Upang gamitin ang ' display: table-cell ” CSS property, gumawa ng nested div container at maglagay ng klase sa bawat container na may partikular na pangalan. Pagkatapos, i-access ang div container sa CSS, at ilapat ang property na 'display: table-cell', kung saan ang ' display Ang ” property ay ginagamit para sa pagtatakda ng data sa mga cell ng talahanayan. Ipinakita ng post na ito ang pamamaraan para sa paggamit ng display:table-cell CSS property.