- Hogyan adhatunk szegélyt a
táblázatsorhoz? - Állítsa a border-bottomot a Táblázat sor
elemére - Stílusú táblázatelem
- Stílus „td” elem
- Stílusú „tr” elem
Hogyan adhatunk szegélyt a
táblázatsorhoz? Ha hozzáadja a szegélyt a táblázat sorához, akkor a szegély az egész sorhoz hozzáadódik, hogy jobb vizuális élményt nyújtson, és magára vonzza a felhasználó figyelmét.
Az alábbiakban egy részletes példa látható a szegély-alsó hozzáadására a táblázat
sorához:
Állítsa a border-bottomot a
táblázatsorra Hozzon létre egy egyszerű táblázatot, amely 3 sort és 3 oszlopot tartalmaz a HTML fájlunkban, amelyek a
, és elemek felhasználásával készülnek:
< asztal >
< tr osztály = 'sor' >
< th > Név < / th >
< th > Állapot < / th >
< th > számú szoba < / th >
< / tr >
< tr osztály = 'sor' >
< td > Fakhar < / td >
< td > Diák < / td >
< td > 05 < / td >
< / tr >
< tr osztály = 'sor' >
< td > Omar < / td >
< td > Diák < / td >
< td > 05 < / td >
< / tr >
< / asztal >A fenti kódrészletben a
tábla soraihoz „sor” osztályt rendeltünk, hogy később a CSS-ben elérhető legyen.
A weboldal így fog kinézni:
Stílusú táblázatelem
A CSS részben válassza ki a táblázatelemet, és igazítsa a szöveget középre. Ezt követően használja a „ határ-összeomlás ” tulajdonság értékének összecsukására való beállításához:
asztal
{
border-collapse: összeomlás;
szöveg igazítása: középre;
}Stílus „td” elem
A jobb vizuális megjelenítés érdekében adjunk 20 képpontos kitöltést a táblázatadatok „
” és a táblázat fejléce „ ” elemeihez: td
{
padding:20px;
}
th
{
padding:20px;
}A kimenet így néz ki:
A fenti kimenet 20 képpontos kitöltést mutatott, és a szöveget középre igazította.
Stílusú „tr” elem
A CSS-fájlban adja hozzá a border-bottom tulajdonságot a „tr” választó alatt. A táblázat minden sorához hozzárendeli, beleértve a címsort is. Például állítsa az értékét 2px tömör sötétciánra:
tr {
szegély-alsó: 2 képpont tömör sötétcián;
}A fenti kódrészlet végrehajtása után a weboldal így néz ki:
Ez minden arról szól, hogyan adjunk szegélyt minden táblázatsor aljához.
”. Következtetés
Ha szegélyt szeretne hozzáadni a
elem aljához, állítsa a border-collapse CSS tulajdonságot összecsukásra, és használja a border-bottom tulajdonságot a „ ” elemen. Lehetővé teszi a CSS tulajdonság számára, hogy szegélyeket alkalmazzon a táblán. Így könnyedén hozzáadhat egy keret-alsót minden „
” címkéhez. - Állítsa a border-bottomot a Táblázat sor