Kako dodati obrub-dno retku tablice?

Svojstvo CSS-a 'border-bottom' koristi se za dodavanje obruba na dno bilo kojeg HTML elementa. Iako, to ne utječe izravno na red tablice. Razlog je taj što svojstvo border-collapse ima odvojeno kao unaprijed definiranu vrijednost i ne dopušta stil retka. Ovaj vodič ilustrira kako primijeniti donju granicu na elementa tablice.

Kako dodati obrub-dno retku tablice ?
Postavite border-bottom na Element reda tablice
Element tablice stila
Element stila 'td'.
Element stila 'tr'.

Kako dodati obrub-dno retku tablice ?

Dodavanje obruba na dno u red tablice će dodati obrub u cijeli red kako bi se napravio bolji vizualni doživljaj i privuklo fokus korisnika.

Detaljan primjer dodavanja obruba na dnu retka tablice prikazan je u nastavku:

Postavite border-bottom na Red tablice

Napravite jednostavnu tablicu koja sadrži 3 retka i 3 stupca u našoj HTML datoteci koji su napravljeni pomoću , i elemenata:

< stol >
< tr razreda = 'red' >
< th > Ime < / th >
< th > Status < / th >
< th > soba br < / th >
< / tr >
< tr razreda = 'red' >
< td > Fakhar < / td >
< td > Student < / td >
< td > 05 < / td >
< / tr >
< tr razreda = 'red' >
< td > Omar < / td >
< td > Student < / td >
< td > 05 < / td >
< / tr >
< / stol >

U gornjem isječku koda dodijelili smo klasu 'row' redovima tablice , tako da joj se kasnije može pristupiti u CSS-u.

Web stranica će izgledati ovako:

Element tablice stila

U CSS dijelu odaberite element tablice i poravnajte tekst prema sredini. Nakon toga upotrijebite ' granica-kolaps ” za postavljanje njegove vrijednosti na skupljanje:

stol
{
border-collapse: kolaps;
poravnanje teksta: središte;
}

Element stila 'td'.

Za bolju vizualnu prezentaciju, dajmo ispunu od 20 px elementima podataka tablice “” i zaglavlja tablice “”:

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

Izlaz izgleda ovako:

Gornji izlaz pokazao je ispunu od 20 px i poravnao tekst prema sredini.

Element stila 'tr'.

U CSS datoteci dodajte svojstvo border-bottom ispod selektora 'tr'. Dodjeljuje svakom retku tablice uključujući red naslova. Na primjer, postavite njegovu vrijednost na 2px solid darkcyan:

tr {
rub-bottom: 2px puna tamnocijan;
}

Nakon izvršavanja gornjeg isječka koda, web stranica izgleda ovako:

To je sve o tome kako dodati obrub na dno svakog retka tablice '

”.

Zaključak

Da biste dodali obrub na dnu elementa , postavite CSS svojstvo border-collapse na kolaps i koristite svojstvo border-bottom na elementu “”. Omogućuje svojstvu CSS-a primjenu obruba na tablicu. Tako možete jednostavno dodati rub-bottom svakoj oznaci “

”.

Kako dodati obrub-dno retku tablice?