- Hoe Border-Bottom toe te voegen aan tabelrij
? - Stel border-bottom in op Table Row
Element - Stijl tabelelement
- Stijl 'td' -element
- Stijl 'tr' -element
Hoe Border-Bottom toe te voegen aan tabelrij
? Door de rand onderaan aan de tabelrij toe te voegen, wordt de rand aan de hele rij toegevoegd voor een betere visuele ervaring en om de aandacht van de gebruiker te trekken.
Een gedetailleerd voorbeeld van het toevoegen van border-bottom aan tabelrij
wordt hieronder gedemonstreerd:
Stel border-bottom in op de tabelrij
Maak een eenvoudige tabel met 3 rijen en 3 kolommen in ons HTML-bestand die zijn gemaakt met behulp van
, en elementen:
< tafel >
< tr klas = 'rij' >
< e > Naam < / e >
< e > Toestand < / e >
< e > Kamer nummer < / e >
< / tr >
< tr klas = 'rij' >
< td > Fakhar < / td >
< td > Student < / td >
< td > 05 < / td >
< / tr >
< tr klas = 'rij' >
< td > Omar < / td >
< td > Student < / td >
< td > 05 < / td >
< / tr >
< / tafel >In het bovenstaande codefragment hebben we een klasse 'rij' toegewezen aan de tabelrijen
, zodat deze later in de CSS toegankelijk is.
De webpagina zal er als volgt uitzien:
Stijl tabelelement
Selecteer in het CSS-gedeelte het tabelelement en lijn de tekst uit naar het midden. Gebruik daarna de ' grens-ineenstorting ” eigenschap om de waarde in te stellen op samenvouwen:
tafel
{
grens-ineenstorting: ineenstorting;
tekst uitlijnen: centreren;
}Stijl 'td' -element
Voor een betere visuele representatie geven we een opvulling van 20px aan de tabelgegevens '
' en tabelkoptekst ' ' elementen: td
{
opvulling:20px;
}
e
{
opvulling:20px;
}De uitvoer ziet er als volgt uit:
De bovenstaande uitvoer heeft de opvulling van 20px getoond en de tekst naar het midden uitgelijnd.
Stijl 'tr' -element
Voeg in het CSS-bestand de eigenschap border-bottom toe onder de selector 'tr'. Het wijst toe aan elke rij van de tabel, inclusief de koprij. Stel de waarde bijvoorbeeld in op 2px solid darkcyaan:
tr {
border-bottom: 2px effen donkercyaan;
}Na het uitvoeren van het bovenstaande codefragment ziet de webpagina er als volgt uit:
Dat is alles over het toevoegen van een rand aan de onderkant van elke tabelrij '
”. Conclusie
Om een rand aan de onderkant van het
-element toe te voegen, stelt u de CSS-eigenschap border-collapse in op samenvouwen en gebruikt u de border-bottom-eigenschap op het “ ”-element. Hiermee kan de CSS-eigenschap randen op de tafel toepassen. Zo kun je eenvoudig een border-bottom toevoegen aan elke “
”-tag. - Stel border-bottom in op Table Row