Nwlapcug.com


Come utilizzare la proprietà CSS Display per layout griglia

Come utilizzare la proprietà CSS Display per layout griglia


La proprietà di visualizzazione CSS consente di impostare regole per visualizzare che rendono la visualizzazione del contenuto come una griglia o come se si trattasse di una tabella, quando in realtà il materiale non è una tabella. Utilizzando i CSS per creare un layout di griglia dà controllare il layout senza mettere qualsiasi tag di tabella nel codice HTML. Le proprietà di visualizzazione che si riferiscono a una tabella-come l'apparenza, comprese ogni possibile proprietà e valore, verranno descritto in questo articolo.

Istruzioni

1

display: table rende l'elemento di agire come un elemento table. Se si nidificano righe o colonne di griglie all'interno di questo elemento, si dovrebbe utilizzare uno o più delle proprietà descritta più avanti.

2

display: table-row rende l'elemento agire come un elemento di riga di tabella. È possibile utilizzare display: table-row efficacemente senza averlo annidato all'interno di un elemento impostato su display: table. Questo è perché il browser si presuppone l'esistenza di un elemento di tabella "anonimo" e si comporta come se fosse lì. (Vedere suggerimenti qui sotto per ulteriori informazioni su elementi "anonimi"). Ricordate, che non sono creazione di una tabella effettiva dei dati tabulari; si sono semplicemente creando un griglia-come display.

3

display: table-cell rende l'elemento agire come un elemento cella di tabella. È possibile utilizzare display: table-cell efficacemente senza l'elemento nidificato in un elemento impostato su display: table-riga o display: table.

4

display: table-row-group rende l'elemento agire come un elemento di gruppo riga di tabella. Utilizzarlo per un elemento che raggruppa una o più righe. È il modo CSS di esprimere ciò che tbody fa in HTML.

5

display: table-header-group rende l'elemento agire come un elemento di gruppo tabella riga di intestazione. È il modo CSS di esprimere ciò che thead fa in HTML. Con i CSS, table-header-group viene sempre visualizzato prima tutte le altre righe e rowgroups e dopo eventuali didascalie superiore.

6

display: table-footer-group rende l'elemento agire come un elemento di gruppo tabella riga di piè di pagina. Con i CSS, table-footer-group fa cosa tfoot fa in HTML. Table-footer-group viene sempre visualizzato dopo tutte le altre righe e rowgroups e prima di eventuali didascalie di fondo. Stampanti possono ripetere righe di piè di pagina in ogni pagina in che cui si estende una tabella.

7

display: table-didascalia rende l'elemento agire come un elemento didascalia della tabella.

8

display: table-colonna rende l'elemento agire come un elemento di colonna di tabella. È il modo CSS di esprimere ciò che col fa in HTML.

9

display: table-colonna-gruppo rende l'elemento agiscono come un gruppo di colonne di tabella. Utilizzarlo per raggruppare una o più colonne. È il modo CSS di esprimere ciò che colgroup fa in HTML.

Consigli & Avvertenze

  • Qualsiasi elemento di display: table genererà automaticamente gli oggetti di tabella anonimi necessario intorno a sé.
  • Qualsiasi selettore nel tuo foglio di stile impostato su uno di questi display proprietà possono essere in stile con le regole di vasta gamma di CSS compreso imbottitura, margine, bordo, sfondo e le proprietà di famiglia di caratteri.
  • Proprietà di visualizzazione CSS non sono supportati dalle versioni di Internet Explorer versione 8.