Metodo 1: utilizzo dell'attributo 'larghezza' HTML
IL ' larghezza ' è un attributo di base fornito da HTML. Imposta la larghezza o la lunghezza orizzontale dell'elemento HTML. Per correggere i dati della tabella, l'attributo width viene utilizzato nei passaggi seguenti.
Passaggio 1: crea una tabella Passaggio 2: aggiungi le proprietà CSS all'elemento 'tabella'. Passaggio 3: assegnazione delle proprietà all'elemento 'td'. Passaggio 4: assegnazione delle proprietà all'elemento 'th'. L'output viene visualizzato come: L'istantanea sopra mostra che tutte le larghezze delle colonne sono fissate al 30% ciascuna. La proprietà nth-child() di CSS viene utilizzata per creare una tabella a larghezza fissa. Questa proprietà ottiene il numero di colonna e seleziona ' L'output del blocco di codice precedente è: Questo output mostra che i numeri di colonna 1 e 3 sono fissati alla larghezza del 10%. Dentro il ' tavolo ” sezione nella parte CSS aggiungi il “ layout della tabella: fisso ” per impostare la “larghezza” degli elementi della tabella dati: Nel file HTML, aggiungi ' Dopo aver eseguito il frammento di codice precedente, l'output è: Questo è il modo in cui l'utente può correggere la larghezza dei dati della tabella Per correggere la larghezza dei dati della tabella, utilizzare il ' larghezza ” attributo, “ n-esimo figlio( ) ” separatore e “
Nel file HTML, usa un ' ' E ' ” tagga e scrive i dati al suo interno:
< centro >
< tavolo >
< tr >
< th > Nome < / th >
< th > Stato < / th >
< th > Stanza No < / th >
< / tr >
< tr >
< td > Fachar < / td >
< td > Alunno < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Alunno < / td >
< td > 06 < / td >
< / tr >
< / tavolo >
< / centro >
Usa il selettore di elementi della tabella in CSS e aggiungi ' confine ” di 1px rosso fisso, “ allineamento del testo ' allinea il testo al centro e ' larghezza ” che imposta la larghezza complessiva del tavolo all'80%:
tavolo {
confine : 1px rosso fisso;
testo- allineare : centro;
larghezza : 80 %; }
Usa il ' td ” elemento selettore e imposta il “ bordo inferiore ” di 5px rosso fisso, “ imbottitura ' di 20 px per rendere l'elemento più visibile e ' larghezza ” imposta come 30%:
td {
border-bottom: 5px rosso fisso;
imbottitura: 20px;
larghezza : 30 %;
}
Usa il ' th ' selettore di elementi per cambiare il colore di ' bordo inferiore ” dal rosso al verde mare per creare una migliore visualizzazione:
th {
border-bottom: 5px solido verde mare;
imbottitura: 20px;
larghezza : 30 %;
}
Metodo 2: utilizzo del selettore 'nth-child( )'.
' E ' ” tag. Ad esempio, la larghezza è ' fisso ' solo per i numeri di colonna ' 1 ' E ' 3 ”. Ognuna di queste colonne ottiene una larghezza del 10%. Questo articolo ha dimostrato con successo come correggere la larghezza della tabella dati. td:ennesimo figlio ( 3 ) {
larghezza : 10 %;
}
th:nesimo figlio ( 1 ) {
larghezza : 10 %;
}
Metodo 3: utilizzo del tag
layout del tavolo: fisso;
larghezza : 80 %;
confine : 1px rosso fisso;
testo- allineare : centro;
}
< col stile = 'larghezza: 15%;' / >
< col stile = 'larghezza: 30%;' / >
elementi.
Conclusione
elementi.