Hvordan bruke CSS display: table-rad og display: table-cell Properties

CSS display: table-rad egenskapen kan du gjøre innholdet vises i en nettleser som om det var en tabell rad. Du kan plassere innhold i en div som skal vises som om det var en tabellcelle ved hjelp av CSS display: table-cell eiendom. Men det er ingen HTML markup gjør det viste innholdet en faktisk tabell med tabellinformasjon. Innholdet kan være tilgjengelig, samtidig som det gir deg muligheten til å vise at innholdet som om det var et bord eller rutenett. Her er hvordan det gjøres.

Bruksanvisning

Planlegger layout

1 Hvordan bruke CSS display: table-rad og display: table-cell Properties

For å demonstrere, her er en enkel CSS sentrert to-kolonne layout i en container div. Legg merke til at HTML er ikke for en tabell. Det er en beholder div som inneholder to nestede divs: en sidebar og et innholdsområdet. Nestet i innholdsområdet du se en div holde to nestede divs. Disse divs er tildelt til klassen "rad" og henholdsvis "celle", slik at de kan bli stylet med CSS.

2 Hvordan bruke CSS display: table-rad og display: table-cell Properties


Tildele følgende CSS til siden. Legg merke til at sidebar1 og Maincontent divs får eiendommen display: table-cell. Det er ikke nødvendig å legge disse display: table-cell presentasjons divs i et display: table eller vise: table-rad div. Dette er fordi bordet og tabellraden er underforstått. Det betyr at nettleseren vil fungere som om et bord og en tabell rad ble faktisk gitt. For den nestede rad med to celler som skal vises i hovedinnholdet området ved hjelp av CSS vist for klassen "rad" og klassen "celle" i CSS vist. Farger og grenser er gitt for klarhet. De er ikke nødvendig for å oppnå layout resultater.

3 Hvordan bruke CSS display: table-rad og display: table-cell Properties


Resultatene vises i et rutenett-lignende måte med en beholder som inneholder to store celler eller bokser som viser som kolonner. Innenfor Maincontent området ser du raden av to celler eller bokser som kan inneholde tekst eller bilder ved behov. Dette rutenettet effekten ble oppnådd med CSS skjermegenskaper.

4 I HTML, kom sidelinjen først i kilde rekkefølge. Du kan snu det for å plassere sidepanelet til høyre ved å sette Maincontent div først i HTML-kilden orden.

Hint

  • Du kan utelate div tildelt klassen "rad" og regelen for .row i CSS og oppnå de samme resultatene. Dette er fordi leseren forutsetter at tabellraden er underforstått når bordet-cellen anvendes.
  • CSS display: table-rad og display: table-celle egenskaper støttes ikke av Internet Explorer-versjoner under versjon 8.