- Com afegir la vora inferior a la fila de la taula
? - Estableix la vora inferior a l'element
Fila de la taula - Element de taula d'estil
- Element d'estil “td”.
- Element d'estil “tr”.
Com afegir la vora inferior a la fila de la taula
? Afegir la vora inferior a la fila de la taula afegirà la vora a tota la fila per fer una millor experiència visual i atraure l'atenció de l'usuari.
A continuació es mostra un exemple detallat d'afegir border-bottom a la fila de la taula
:
Estableix la vora inferior a la fila de la taula
Creeu una taula senzilla que contingui 3 files i 3 columnes al nostre fitxer HTML que es fan amb elements
, i :
< taula >
< tr classe = 'fila' >
< th > Nom < / th >
< th > Estat < / th >
< th > Sala núm < / th >
< / tr >
< tr classe = 'fila' >
< td > Fakhar < / td >
< td > Estudiant < / td >
< td > 05 < / td >
< / tr >
< tr classe = 'fila' >
< td > Omar < / td >
< td > Estudiant < / td >
< td > 05 < / td >
< / tr >
< / taula >En el fragment de codi anterior, hem assignat una classe de 'fila' a les files de la taula
, de manera que es pugui accedir més endavant al CSS.
La pàgina web tindrà aquest aspecte:
Element de taula d'estil
A la part CSS, seleccioneu l'element de la taula i alineeu el text al centre. Després d'això, utilitzeu ' col·lapse fronterer ” propietat per establir el seu valor per col·lapsar:
taula
{
border-collapse: col·lapse;
alineació de text: centre;
}Element d'estil 'td'.
Per a una millor representació visual, donem un farciment de 20 píxels a les dades de la taula '
' i als elements de la capçalera de la taula ' ': td
{
farciment: 20 píxels;
}
th
{
farciment: 20 píxels;
}La sortida té aquest aspecte:
La sortida anterior ha mostrat el farciment de 20 píxels i ha alineat el text al centre.
Element d'estil “tr”.
Al fitxer CSS, afegiu la propietat border-bottom sota el selector 'tr'. S'assigna a cada fila de la taula inclosa la fila d'encapçalament. Per exemple, establiu el seu valor a 2px sòlid cian fosc:
tr {
vora inferior: cian fosc sòlid de 2 píxels;
}Després d'executar el fragment de codi anterior, la pàgina web té aquest aspecte:
Això és tot sobre com afegir una vora a la part inferior de cada fila de la taula '
”. Conclusió
Per afegir una vora a la part inferior de l'element
, configureu la propietat CSS border-collapse perquè col·lapse i utilitzeu la propietat border-bottom a l'element ' '. Permet que la propietat CSS apliqui vores a la taula. Així és com podeu afegir fàcilment una vora inferior a cada etiqueta '
'. - Estableix la vora inferior a l'element