HTML-elementtien muotoiluun on olemassa useita CSS-ominaisuuksia. ' näyttö ”-ominaisuus on yksi niistä, jota käytetään asettamaan elementti, jota hallitaan rivielementtinä tai lohkoelementtinä. Lisäksi lapsilleen käytetty asettelu, kuten flow, flex tai grid. Lisäksi tämä ominaisuus allokoi sisäisen ja ulkoisen tyypin elementin näyttämiseksi.
Tämä viesti selittää:
Kuinka käyttää 'näyttö: taulukkosolu' CSS:ssä?
Käyttääksesi ' näyttö 'omaisuus arvolla' pöytäsolu ”, kokeile annettuja ohjeita.
Vaihe 1: Tee sisäkkäisiä div-säilöjä
Luo ensin div-pääsäiliö ' Päästäksesi päädivisioon, käytä ' #taulukon sisältö ', missä ' # ' on valitsin, jota käytetään määritetyn ' id ” div-säilön attribuutti. Käytä sitten seuraavia ominaisuuksia: Vaihe 3: Muotoile 'tr-div' -säiliö Tyyli nyt ' tr-div ”kontti seuraavasti: Lähtö ' näyttö: taulukko-solu ” CSS-ominaisuutta käytetään asettamaan näyttö datalle, joka saa elementin käyttäytymään taulukon tavoin. Joten käyttäjät voivat luoda taulukon kaksoiskappaleen HTML-muodossa käyttämättä taulukkoelementtiä ja muita elementtejä, mukaan lukien td ja tr. Tarkemmin sanottuna hänen ominaisuutensa määrittelee tiedot taulukon muodossa. Käyttääksesi ' näyttö: taulukko-solu ” CSS-ominaisuus, luo sisäkkäisiä div-säilöjä ja lisää jokaiseen säilöön luokka tietyllä nimellä. Avaa sitten CSS:n div-säilö ja käytä 'display: table-cell' -ominaisuutta, jossa ' näyttö ” -ominaisuutta käytetään taulukon solujen tietojen asettamiseen. Tämä viesti esitteli menetelmän Display:table-cell CSS-ominaisuuden hyödyntämiseksi.
< div id = 'taulukon sisältö' >
< div luokkaa = 'tr-div' >
< div luokkaa = 'td-div' > Harry div >
< div luokkaa = 'td-div' > HTML / CSS div >
div >
< div luokkaa = 'tr-div' >
< div luokkaa = 'td-div' > Edward div >
< div luokkaa = 'td-div' > Satamatyöläinen div >
div >
< div luokkaa = 'tr-div' >
< div luokkaa = 'td-div' > Jack div >
< div luokkaa = 'td-div' > Git div >
div >
div >
Voidaan huomata, että tietojen lisääminen onnistui:
Vaihe 2: Muotoile 'taulukon sisältö' -säiliö
näyttö: pöytä;
täyte: 7px;
}
Tässä:
näyttö: taulukko-rivi;
taustaväri: rgb ( 164 , 241 , 215 ) ;
täyte: 7px;
}
Yllä olevan koodilohkon mukaan ' näyttö ' omaisuuden arvoksi on asetettu ' pöytä-rivi ', mikä tarkoittaa, että tiedot asetetaan taulukon rivien muodossa, ' taustaväri '-ominaisuutta käytetään värin määrittämiseen elementin takapuolella, ja lopuksi ' pehmuste ' on käytössä:
Vaihe 4: Käytä 'display: table-cell' -ominaisuutta 'td-div' -säilössä
näyttö: taulukko-solu;
leveys: 150 pikseliä;
raja: #0f4bf0 kiinteä 1px;
marginaali: 5px;
täyte: 7px;
}
Pääset kolmanteen divoon '' .td-div ” pisteen valikoiva ja vastaava tunnus ja käytä alla annettuja CSS-ominaisuuksia:
Miksi käyttää 'display: table-cell' CSS:ssä?
Johtopäätös