Come fare la tabella reattiva - CSS
Questo articolo dimostrerà come possiamo creare una tabella reattiva tramite CSS.
Come creare/creare una tabella reattiva?
La creazione di una tabella reattiva in HTML richiede l'uso di "Overflow-X"Proprietà nella""Elemento in cui il" Sintassi Qui, la proprietà "Overflow-X" aggiunge la barra di scorrimento per rendere il tavolo reattivo. Prerequisito: crea una tabella Tavolo reattivo Nel suddetto snippet del codice HTML: Nell'elemento in stile CSS, è necessario definire "Overflow-X"Proprietà per rendere il tavolo reattivo. Puoi anche aggiungere alcune altre proprietà per rendere più presentabile la tabella: Nell'elemento in stile CSS sopra: Il codice sopra effettuerà una tabella ampia nell'output e quanto segue sarà il display: Se la dimensione dello schermo è ridotta al minimo in modo tale da traboccare di bordi dello schermo, ci sarà una barra di scorrimento orizzontale visualizzata nella parte inferiore a causa dell'uso di "Overflow-X" proprietà: Questo conclude come creare tabelle reattive in HTML. Conclusione Le tabelle reattive in HTML sono create aggiungendo il CSS "Overflow-X"Proprietà per l'elemento Div in cui viene creata la tabella. Questa proprietà crea semplicemente una barra di scorrimento orizzontale proprio all'estremità del tavolo che rende il tavolo orizzontale scorrevole. Questo post ha dimostrato un metodo utile per rendere una tabella semplice reattiva. " è creato.
La sintassi per aggiungere il "Overflow-X"La proprietà per rendere la tabella reattiva è la seguente:
Creiamo una tabella che si espande orizzontalmente in modo tale da traboccare la larghezza dello schermo aggiungendo multipli "" E " " elementi: Nome Standard Punto Punto Punto Punto Punto Punto Punto Punto Punto Punto Punto Punto Punto fabbro 8 ° 50 50 50 50 50 50 50 50 50 50 50 50 50 Jack 9 ° 70 70 70 70 70 70 70 70 70 70 70 70 70 John 10 ° 55 55 55 55 55 55 55 55 55 55 55 55 55
"L'elemento viene aggiunto per creare una tabella nella pagina web.
"Elemento, quattro"
"Sono stati aggiunti elementi per fare quattro righe della tabella. "Sono stati aggiunti elementi che definiscono il contenuto dell'intestazione. "Sono stati aggiunti elementi per inserire il contenuto nelle righe della tabella.
Overflow-X: auto;
tavolo
Spazio di confine: 0;
larghezza: 100%;
bordo: 1px solido #ddd;
th, td
Testo-align: sinistra;
imbottitura: 8px;
TR: nth-child (pari)
Background-color: #f2f2f2;