Kako dodati obrobo na dno v vrstico tabele?

Lastnost »border-bottom« CSS se uporablja za dodajanje obrobe na dno katerega koli elementa HTML. Čeprav ne vpliva neposredno na vrstico tabele. Razlog je v tem, da ima lastnost border-collapse ločeno vnaprej določeno vrednost in ne dovoljuje sloga vrstice. Ta vodnik ponazarja, kako uporabiti spodnjo obrobo za elementa tabele.

Kako dodati obrobo na dno v vrstico tabele ?
Nastavite border-bottom na Element vrstice tabele
Element tabele stilov
Element sloga 'td'.
Element sloga 'tr'.

Kako dodati obrobo na dno v vrstico tabele ?

Če v vrstico tabele dodate obrobo na dnu, boste dodali obrobo celotni vrstici, da boste dobili boljšo vizualno izkušnjo in pritegnili pozornost uporabnika.

Spodaj je prikazan podroben primer dodajanja roba na dno v vrstico tabele :

Nastavite border-bottom na vrstico tabele

Ustvarite preprosto tabelo, ki vsebuje 3 vrstice in 3 stolpce v naši datoteki HTML, ki so narejene z uporabo elementov , in :

< tabela >
< tr razred = 'vrstica' >
< th > Ime < / th >
< th > Stanje < / th >
< th > soba št < / th >
< / tr >
< tr razred = 'vrstica' >
< td > Fakhar < / td >
< td > študent < / td >
< td > 05 < / td >
< / tr >
< tr razred = 'vrstica' >
< td > Omar < / td >
< td > študent < / td >
< td > 05 < / td >
< / tr >
< / tabela >

V zgornjem delčku kode smo vrsticam tabele dodelili razred »vrstica«, tako da je do njega mogoče pozneje dostopati v CSS.

Spletna stran bo videti takole:

Element tabele stilov

V delu CSS izberite element tabele in poravnajte besedilo na sredino. Po tem uporabite » zrušitev meje ” za nastavitev njene vrednosti na strnitev:

tabela
{
border-collapse: kolaps;
poravnava besedila: sredina;
}

Element sloga 'td'.

Za boljšo vizualno predstavitev dajmo elementom podatkov tabele “” in glave tabele “” odmik 20 slikovnih pik:

td
{
oblazinjenje:20px;
}
th
{
oblazinjenje:20px;
}

Izhod izgleda takole:

Zgornji rezultat je pokazal odmik 20 slikovnih pik in poravnal besedilo na sredino.

Element sloga 'tr'.

V datoteki CSS dodajte lastnost border-bottom pod izbirnik »tr«. Dodeli vsaki vrstici tabele, vključno z naslovno vrstico. Na primer, nastavite njegovo vrednost na 2px polno temno cijan:

tr {
obroba-spodnja: 2px, polna temno cijan;
}

Po izvedbi zgornjega delčka kode je spletna stran videti takole:

To je vse o tem, kako dodati obrobo na dnu vsake vrstice tabele '

”.

Zaključek

Če želite dodati obrobo na dnu elementa , nastavite lastnost CSS border-collapse na kolaps in uporabite lastnost border-bottom na elementu “”. Lastnosti CSS omogoča uporabo obrob na tabeli. Tako lahko vsaki oznaki »

« preprosto dodate obrobo na dnu.

Kako dodati obrobo na dno v vrstico tabele?