Hvordan tilføjes kant-bund til tabelrække?

Egenskaben 'border-bottom' i CSS bruges til at tilføje grænsen i bunden af ethvert HTML-element. Selvom det ikke påvirker tabelrækken direkte. Årsagen er, at egenskaben border-collapse har separat som en foruddefineret værdi, og den tillader ikke rækkens stil. Denne vejledning illustrerer, hvordan man anvender en bundramme på af tabelelementet.

Hvordan tilføjes kant-bund til tabelrække ?
Indstil kant-bund til tabelrække Element
Stil bordelement
Stil 'td' Element
Stil 'tr' Element

Hvordan tilføjes kant-bund til tabelrække ?

Tilføjelse af kant-bunden til tabelrækken vil tilføje grænsen til hele rækken for at skabe en bedre visuel oplevelse og tiltrække brugerens fokus.

Et detaljeret eksempel på tilføjelse af border-bottom til tabelrækken er vist nedenfor:

Indstil kant-bund til tabelrækken

Opret en simpel tabel, der indeholder 3 rækker og 3 kolonner i vores HTML-fil, som er lavet ved hjælp af , og elementer:

< bord >
< tr klasse = 'række' >
< th > Navn < / th >
< th > Status < / th >
< th > Værelse nr < / th >
< / tr >
< tr klasse = 'række' >
< td > Fakhar < / td >
< td > Studerende < / td >
< td > 05 < / td >
< / tr >
< tr klasse = 'række' >
< td > Omar < / td >
< td > Studerende < / td >
< td > 05 < / td >
< / tr >
< / bord >

I ovenstående kodestykke har vi tildelt en klasse 'række' til tabelrækkerne , så den kan tilgås senere i CSS.

Hjemmesiden vil se sådan ud:

Stil bordelement

Vælg tabelelementet i CSS-delen og juster teksten til midten. Brug derefter ' grænse-kollaps egenskab for at indstille dens værdi til at skjule:

bord
{
grænse-kollaps: kollaps;
tekst-align: center;
}

Stil 'td' Element

For en bedre visuel repræsentation, lad os give udfyldning på 20px til tabeldataene '' og tabeloverskriften '':

td
{
polstring:20px;
}
th
{
polstring:20px;
}

Outputtet ser således ud:

Ovenstående output har vist polstringen på 20px og justeret teksten til midten.

Stil 'tr' Element

Tilføj egenskaben border-bottom i CSS-filen under 'tr'-vælgeren. Den tildeler hver række i tabellen inklusive overskriftsrækken. Indstil for eksempel dens værdi til 2px solid darkcyan:

tr {
border-bottom: 2px solid darkcyan;
}

Efter at have udført ovenstående kodestykke, ser websiden sådan ud:

Det handler om, hvordan man tilføjer en kant nederst i hver tabelrække '

”.

Konklusion

For at tilføje en kant i bunden af -elementet skal du indstille CSS-egenskaben border-collapse til at skjule og bruge border-bottom-egenskaben på ''-elementet. Det giver CSS-egenskaben mulighed for at anvende grænser på bordet. Det er sådan, du nemt kan tilføje en kant-bund til hvert '

'-tag.

Hvordan tilføjes kant-bund til tabelrække?