- Kuinka lisätä reuna-ala taulukon riville
? - Aseta border-bottom taulukon rivin
elementtiin - Tyylipöytäelementti
- Tyylielementti 'td'.
- Tyyli 'tr' Element
Kuinka lisätä reuna-ala taulukon riville
? Reunuksen alareunan lisääminen taulukon riville lisää reunuksen koko riville, mikä parantaa visuaalista kokemusta ja kiinnittää käyttäjän huomion.
Yksityiskohtainen esimerkki border-bottin lisäämisestä taulukon riville
on esitetty alla:
Aseta border-bottom taulukon riviksi
Luo yksinkertainen taulukko, joka sisältää 3 riviä ja 3 saraketta HTML-tiedostoomme, jotka on tehty
-, - ja -elementeillä:
< pöytä >
< tr luokkaa = 'rivi' >
< th > Nimi < / th >
< th > Tila < / th >
< th > Huone numero < / th >
< / tr >
< tr luokkaa = 'rivi' >
< td > Fakhar < / td >
< td > Opiskelija < / td >
< td > 05 < / td >
< / tr >
< tr luokkaa = 'rivi' >
< td > Omar < / td >
< td > Opiskelija < / td >
< td > 05 < / td >
< / tr >
< / pöytä >Yllä olevassa koodinpätkässä olemme määrittäneet taulukon riveille
rivin luokan, jotta sitä voidaan käyttää myöhemmin CSS:ssä.
Verkkosivu näyttää tältä:
Tyylipöytäelementti
Valitse CSS-osiossa taulukkoelementti ja kohdista teksti keskelle. Käytä sen jälkeen ' rajan romahtaminen ”-ominaisuutta asettaaksesi sen arvon kutistumaan:
pöytä
{
border-collapse: romahtaa;
tekstin tasaus: keskellä;
}Tyylielementti 'td'.
Paremman visuaalisen esityksen saamiseksi annamme taulukon datan '
' ja taulukon otsikon ' ' elementeille 20 kuvapisteen täytön: td
{
täyte: 20px;
}
th
{
täyte: 20px;
}Tuloste näyttää tältä:
Yllä olevassa tulosteessa on 20 pikselin täyte ja teksti on kohdistettu keskelle.
Tyyli 'tr' Element
Lisää CSS-tiedostoon border-bottom -ominaisuus 'tr'-valitsimen alle. Se määrittää jokaiselle taulukon riville otsikkorivi mukaan lukien. Aseta esimerkiksi sen arvoksi 2px solid darkcyan:
tr {
reuna-ala: 2px kiinteää tummansyaania;
}Yllä olevan koodinpätkän suorittamisen jälkeen verkkosivu näyttää tältä:
Siinä on kyse siitä, kuinka reunus lisätään jokaisen taulukon rivin alareunaan.
”. Johtopäätös
Jos haluat lisätä reunuksen
-elementin alaosaan, aseta CSS-ominaisuus border-collapse tiivistämään ja käytä border-bottom -ominaisuutta ' '-elementissä. Sen avulla CSS-ominaisuus voi käyttää reunoja taulukossa. Näin voit helposti lisätä reunuksen alaosan jokaiseen '
' -tunnisteeseen. - Aseta border-bottom taulukon rivin