Kā tabulas rindai pievienot apmali-apakšā?

CSS rekvizīts “border-bottom” tiek izmantots, lai pievienotu apmali jebkura HTML elementa apakšā. Lai gan tas tieši neietekmē tabulas rindu. Iemesls ir tāds, ka apmales sakļautības rekvizītam ir atsevišķs kā iepriekš noteikta vērtība, un tas neatļauj rindas stilu. Šajā rokasgrāmatā ir parādīts, kā tabulas elementa lietot apakšējo apmali.

Kā tabulas rindai pievienot apmali-apakšā?
Iestatīt apmali-apakšu uz tabulas rindas elementu
Stila galda elements
Stila “td” elements
Stila “tr” elements

Kā tabulas rindai pievienot apmali-apakšā?

Pievienojot tabulas rindai apmali apakšā, apmale tiks pievienota visai rindai, lai nodrošinātu labāku vizuālo pieredzi un piesaistītu lietotāja uzmanību.

Tālāk ir parādīts detalizēts piemērs, kā tabulas rindai pievienot apmali-apakšu.

Iestatiet apmali-apakšā uz tabulas rindu

Izveidojiet vienkāršu tabulu, kurā ir 3 rindas un 3 kolonnas mūsu HTML failā, kas izveidotas, izmantojot , un elementus:

< tabula >
< tr klasē = 'rinda' >
< th > Vārds < / th >
< th > Statuss < / th >
< th > Telpa Nr < / th >
< / tr >
< tr klasē = 'rinda' >
< td > Fakhar < / td >
< td > Students < / td >
< td > 05 < / td >
< / tr >
< tr klasē = 'rinda' >
< td > Omārs < / td >
< td > Students < / td >
< td > 05 < / td >
< / tr >
< / tabula >

Iepriekš minētajā koda fragmentā tabulas rindām esam piešķīruši “rindas” klasi, lai tai varētu piekļūt vēlāk CSS.

Tīmekļa lapa izskatīsies šādi:

Stila galda elements

CSS daļā atlasiet tabulas elementu un līdziniet tekstu centrā. Pēc tam izmantojiet ' robeža-sabrukums ” rekvizītu, lai iestatītu tā vērtību sakļauto:

tabula
{
border-collapse: sabrukums;
teksta līdzināšana: centrs;
}

Stila “td” elements

Lai iegūtu labāku vizuālo attēlojumu, tabulas datu “” un tabulas galvenes “” elementiem piešķirsim 20 pikseļu polsterējumu:

td
{
polsterējums: 20 pikseļi;
}
th
{
polsterējums: 20 pikseļi;
}

Izvade izskatās šādi:

Iepriekš redzamajā izvadē ir parādīts 20 pikseļu polsterējums un teksts ir līdzināts centrā.

Stila “tr” elements

CSS failā zem atlasītāja “tr” pievienojiet rekvizītu apmales-bottom. Tas piešķir katrai tabulas rindai, ieskaitot virsraksta rindu. Piemēram, iestatiet tā vērtību uz 2 pikseļiem vienkrāsainu tumši ciānu:

tr {
apmale-apakšā: 2 pikseļi vienkrāsains tumši ciāns;
}

Pēc iepriekš minētā koda fragmenta izpildes tīmekļa lapa izskatās šādi:

Tas ir viss par to, kā katras tabulas rindas apakšā pievienot apmali.

”.

Secinājums

Lai pievienotu apmali elementa apakšā, iestatiet CSS rekvizītu border-collapse uz sakļaut un izmantojiet rekvizītu border-bottom elementā “”. Tas ļauj CSS īpašumam piemērot tabulas apmales. Tādā veidā jūs varat viegli pievienot apmali-apakšā katram tagam “

”.

Kā tabulas rindai pievienot apmali-apakšā?