Hvordan legge til kant-bunn til tabellrad?

'Border-bottom'-egenskapen til CSS brukes til å legge til grensen nederst på et HTML-element. Selv om det ikke påvirker tabellraden direkte. Årsaken er at egenskapen border-collapse har separat som en forhåndsdefinert verdi, og den tillater ikke stilen til raden. Denne veiledningen illustrerer hvordan du bruker en bunnramme på av tabellelementet.

Hvordan legge til kant-bunn til tabellrad ?
Sett kant-bunn til Tabellrad Element
Stil bordelement
Stil 'td' Element
Stil 'tr' Element

Hvordan legge til kant-bunn til tabellrad ?

Hvis du legger til kant-bunnen til tabellraden, legges kantlinjen til hele raden for å gjøre en bedre visuell opplevelse og tiltrekke brukerens fokus.

Et detaljert eksempel på å legge til kant-bunn til tabellrad er vist nedenfor:

Sett kant-bunn til tabellraden

Lag en enkel tabell som inneholder 3 rader og 3 kolonner i HTML-filen vår som er laget med , og -elementer:

< bord >
< tr klasse = 'rad' >
< th > Navn < / th >
< th > Status < / th >
< th > Rom nei < / th >
< / tr >
< tr klasse = 'rad' >
< td > Fakhar < / td >
< td > Student < / td >
< td > 05 < / td >
< / tr >
< tr klasse = 'rad' >
< td > Omar < / td >
< td > Student < / td >
< td > 05 < / td >
< / tr >
< / bord >

I kodebiten ovenfor har vi tilordnet en klasse 'rad' til tabellradene , slik at den kan nås senere i CSS.

Nettsiden vil se slik ut:

Stil bordelement

Velg tabellelementet i CSS-delen og juster teksten til midten. Etter det bruker du ' grensekollaps ' egenskap for å sette verdien til å skjule:

bord
{
grense-kollaps: kollaps;
tekst-align: center;
}

Stil 'td' Element

For en bedre visuell representasjon, la oss gi utfylling på 20px til tabelldataene «» og tabelloverskriften «»:

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

Utgangen ser slik ut:

Utgangen ovenfor har vist utfyllingen på 20px og justert teksten til midten.

Stil 'tr' Element

I CSS-filen legger du til border-bottom-egenskapen under 'tr'-velgeren. Den tilordner hver rad i tabellen inkludert overskriftsraden. Sett for eksempel verdien til 2px solid darkcyan:

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

Etter å ha utført kodebiten ovenfor, ser nettsiden slik ut:

Det handler om hvordan du legger til en kantlinje nederst på hver tabellrad '

Konklusjon

For å legge til en kantlinje nederst i -elementet, sett CSS-egenskapen border-collapse til å skjule og bruk border-bottom-egenskapen på «»-elementet. Den lar CSS-egenskapen bruke grenser på bordet. Det er slik du enkelt kan legge til en kant-bunn til hver '

'-tag.

Hvordan legge til kant-bunn til tabellrad?