Kaip pridėti kraštinę-apačią prie lentelės eilutės?

CSS ypatybė „border-bottom“ naudojama kraštinei pridėti bet kurio HTML elemento apačioje. Nors tai neturi tiesioginės įtakos lentelės eilutei. Priežastis ta, kad kraštinės sutraukimo ypatybė turi atskirą kaip iš anksto nustatytą reikšmę ir neleidžia naudoti eilutės stiliaus. Šiame vadove parodyta, kaip lentelės elemento pritaikyti apatinę kraštinę.

Kaip pridėti kraštinę-apačią prie lentelės eilutės ?
Nustatykite kraštinės apačią į lentelės eilutės elementą
Stiliaus stalo elementas
Stiliaus „td“ elementas
Stiliaus „tr“ elementas

Kaip pridėti kraštinę-apačią prie lentelės eilutės ?

Lentelės eilutėje pridėjus kraštinės apačią, kraštinė bus įtraukta į visą eilutę, kad būtų užtikrinta geresnė vizualinė patirtis ir pritrauktų naudotojo dėmesį.

Toliau parodytas išsamus pavyzdys, kaip pridėti kraštinės-apačios į lentelės eilutę :

Nustatykite kraštinės apačią į lentelės eilutę

Sukurkite paprastą lentelę, kurioje yra 3 eilutės ir 3 stulpeliai mūsų HTML faile, kurie sukurti naudojant , ir elementus:

< stalo >
< tr klasė = 'eilutė' >
< th > vardas < / th >
< th > Būsena < / th >
< th > Kambarys Nr < / th >
< / tr >
< tr klasė = 'eilutė' >
< td > Facharas < / td >
< td > Studentas < / td >
< td > 05 < / td >
< / tr >
< tr klasė = 'eilutė' >
< td > Omaras < / td >
< td > Studentas < / td >
< td > 05 < / td >
< / tr >
< / stalo >

Aukščiau pateiktame kodo fragmente lentelės eilutėms priskyrėme „eilutės“ klasę, kad ją vėliau būtų galima pasiekti CSS.

Tinklalapis atrodys taip:

Stiliaus stalo elementas

CSS dalyje pasirinkite lentelės elementą ir sulygiuokite tekstą centre. Po to naudokite „ siena-griūtis ” ypatybę, kad jos vertė sumažėtų:

stalo
{
border-collapse: griūtis;
teksto lygiavimas: centre;
}

Stiliaus „td“ elementas

Kad vaizdas būtų geresnis, lentelės duomenų „“ ir lentelės antraštės „“ elementus užpildykite 20 pikselių:

td
{
pamušalas: 20px;
}
th
{
pamušalas: 20px;
}

Išvestis atrodo taip:

Aukščiau pateiktoje išvestyje parodytas 20 pikselių užpildymas ir tekstas sulygiuotas su centru.

Stiliaus „tr“ elementas

CSS faile po parinkikliu „tr“ pridėkite ypatybę kraštinės apačioje. Jis priskiriamas kiekvienai lentelės eilutei, įskaitant antraštės eilutę. Pavyzdžiui, nustatykite jo vertę į 2 pikselių kietą tamsiai žydrą:

tr {
kraštinė apačia: 2 pikseliai vientisos tamsiai žydros spalvos;
}

Atlikus aukščiau pateiktą kodo fragmentą, tinklalapis atrodo taip:

Tai viskas apie tai, kaip pridėti kraštinę kiekvienos lentelės eilutės apačioje.

“.

Išvada

Norėdami pridėti kraštinę elemento apačioje, nustatykite CSS ypatybę border-collapse taip, kad ji būtų sutraukta, o elemente „“ naudokite ypatybę border-bottom. Tai leidžia CSS nuosavybei pritaikyti lentelės ribas. Taip prie kiekvienos „

“ žymos galite lengvai pridėti kraštinės apačią.

Kaip pridėti kraštinę-apačią prie lentelės eilutės?