Hur lägger man till kant-botten till tabellraden?

Egenskapen 'border-bottom' för CSS används för att lägga till gränsen längst ned i alla HTML-element. Även om det inte direkt påverkar tabellraden. Anledningen är att egenskapen border-collapse har separat som ett fördefinierat värde och den tillåter inte stilen på raden. Den här guiden illustrerar hur man tillämpar en nedre kant på i tabellelementet.

Hur lägger man till kant-botten till tabellraden ?
Ställ in border-bottom till Tabellrad Element
Stil bordselement
Stil 'td' Element
Stil 'tr' Element

Hur lägger man till kant-botten till tabellraden ?

Om du lägger till kant-botten till tabellraden lägger du till kanten på hela raden för att göra en bättre visuell upplevelse och attrahera användarens fokus.

Ett detaljerat exempel på att lägga till border-bottom till tabellraden visas nedan:

Ställ in border-bottom till tabellraden

Skapa en enkel tabell som innehåller 3 rader och 3 kolumner i vår HTML-fil som är gjorda med hjälp av , och element:

< tabell >
< tr klass = 'rad' >
< th > namn < / th >
< th > Status < / th >
< th > Rum Nej < / th >
< / tr >
< tr klass = 'rad' >
< td > Fakhar < / td >
< td > Studerande < / td >
< td > 05 < / td >
< / tr >
< tr klass = 'rad' >
< td > Omar < / td >
< td > Studerande < / td >
< td > 05 < / td >
< / tr >
< / tabell >

I ovanstående kodavsnitt har vi tilldelat en klass av 'rad' till tabellraderna , så att den kan nås senare i CSS.

Webbsidan kommer att se ut så här:

Stil bordselement

Välj tabellelementet i CSS-delen och rikta in texten i mitten. Efter det använder du ' gränskollaps ' egenskap för att ställa in dess värde för att kollapsa:

tabell
{
border-collapse: kollapsa;
text-align: center;
}

Stil 'td' Element

För en bättre visuell representation, låt oss ge utfyllnad på 20px till tabelldataelementen '' och tabellhuvudet '':

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

Utgången ser ut så här:

Ovanstående utdata har visat utfyllnaden på 20px och justerat texten till mitten.

Stil 'tr' Element

Lägg till egenskapen border-bottom i CSS-filen under 'tr'-väljaren. Den tilldelar varje rad i tabellen inklusive rubrikraden. Ange till exempel dess värde till 2px solid darkcyan:

tr {
border-bottom: 2px massiv mörkcyan;
}

Efter att ha kört ovanstående kodavsnitt ser webbsidan ut så här:

Det handlar om hur man lägger till en ram längst ner på varje tabellrad '

”.

Slutsats

För att lägga till en kantlinje längst ned i -elementet, ställ in CSS-egenskapen border-collapse att kollapsa och använd egenskapen border-bottom på ''-elementet. Det tillåter CSS-egenskapen att tillämpa gränser på bordet. Det är så du enkelt kan lägga till en kant-botten till varje '

'-tagg.

Hur lägger man till kant-botten till tabellraden?