- Come aggiungere il bordo inferiore alla riga della tabella
? - Imposta border-bottom su Table Row
Element - Elemento tabella di stile
- Elemento stile 'td'.
- Stile 'tr' Elemento
Come aggiungere il bordo inferiore alla riga della tabella
? L'aggiunta del bordo inferiore alla riga della tabella aggiungerà il bordo all'intera riga per migliorare l'esperienza visiva e attirare l'attenzione dell'utente.
Di seguito è illustrato un esempio dettagliato dell'aggiunta di border-bottom alla riga
della tabella:
Imposta border-bottom sulla riga della tabella
Crea una semplice tabella contenente 3 righe e 3 colonne nel nostro file HTML che sono realizzate utilizzando gli elementi
, e :
< tavolo >
< tr classe = 'riga' >
< th > Nome < / th >
< th > Stato < / th >
< th > Stanza No < / th >
< / tr >
< tr classe = 'riga' >
< td > Fachar < / td >
< td > Alunno < / td >
< td > 05 < / td >
< / tr >
< tr classe = 'riga' >
< td > Omar < / td >
< td > Alunno < / td >
< td > 05 < / td >
< / tr >
< / tavolo >Nello snippet di codice sopra, abbiamo assegnato una classe di 'riga' alla tabella righe
, in modo che sia possibile accedervi successivamente nel CSS.
La pagina web sarà simile a questa:
Elemento tabella di stile
Nella parte CSS seleziona l'elemento tabella e allinea il testo al centro. Successivamente, usa il ' crollo del bordo ” per impostarne il valore su collasso:
tavolo
{
border-collapse: crollo;
text-align: centro;
}Elemento stile 'td'.
Per una migliore rappresentazione visiva, diamo un riempimento di 20 px ai dati della tabella '
' e agli elementi dell'intestazione della tabella ' ': td
{
imbottitura: 20px;
}
th
{
imbottitura: 20px;
}L'output è simile a questo:
L'output sopra ha mostrato il riempimento di 20px e ha allineato il testo al centro.
Stile 'tr' Elemento
Nel file CSS, aggiungi la proprietà border-bottom sotto il selettore 'tr'. Assegna a ogni riga della tabella inclusa la riga di intestazione. Ad esempio, imposta il suo valore su 2px solid darkcyan:
tr {
border-bottom: ciano scuro solido 2px;
}Dopo aver eseguito lo snippet di codice sopra, la pagina web ha questo aspetto:
Questo è tutto su come aggiungere un bordo in fondo a ogni riga della tabella '
”. Conclusione
Per aggiungere un bordo nella parte inferiore dell'elemento
, imposta la proprietà CSS border-collapse su collasso e usa la proprietà border-bottom sull'elemento ' '. Consente alla proprietà CSS di applicare bordi alla tabella. È così che puoi facilmente aggiungere un bordo inferiore a ogni tag '
'. - Imposta border-bottom su Table Row