Jak přidat okraj-dolní okraj do řádku tabulky?

Vlastnost CSS „border-bottom“ se používá k přidání ohraničení na konec jakéhokoli prvku HTML. Nemá to však přímý vliv na řádek tabulky. Důvodem je, že vlastnost border-collapse má jako předdefinovanou hodnotu separát a neumožňuje styl řádku. Tato příručka ukazuje, jak aplikovat spodní ohraničení na prvku tabulky.

Jak přidat okraj-dolní okraj do řádku tabulky ?
Nastavte border-bottom na Table Row Element
Prvek tabulky stylu
Styl prvek „td“.
Prvek stylu „tr“.

Jak přidat okraj-dolní okraj do řádku tabulky ?

Přidáním ohraničení dole do řádku tabulky přidáte ohraničení k celému řádku, abyste získali lepší vizuální zážitek a upoutali pozornost uživatele.

Podrobný příklad přidání border-bottom do řádku tabulky je ukázán níže:

Nastavte border-bottom na řádek tabulky

Vytvořte jednoduchou tabulku obsahující 3 řádky a 3 sloupce v našem HTML souboru, které jsou vytvořeny pomocí prvků , a :

< stůl >
< tr třída = 'řádek' >
< čt > název < / čt >
< čt > Postavení < / čt >
< čt > Pokoj č < / čt >
< / tr >
< tr třída = 'řádek' >
< td > Fakhar < / td >
< td > Student < / td >
< td > 05 < / td >
< / tr >
< tr třída = 'řádek' >
< td > Omar < / td >
< td > Student < / td >
< td > 05 < / td >
< / tr >
< / stůl >

Ve výše uvedeném úryvku kódu jsme řádkům tabulky přiřadili třídu „row“, takže k ní lze později přistupovat v CSS.

Webová stránka bude vypadat takto:

Prvek tabulky stylu

V části CSS vyberte prvek tabulky a zarovnejte text na střed. Poté použijte „ border-kolaps ” vlastnost pro nastavení její hodnoty na sbalení:

stůl
{
border-collapse: kolaps;
text-align: center;
}

Styl prvek „td“.

Pro lepší vizuální reprezentaci dejte výplň o velikosti 20 pixelů pro prvky tabulky „“ a záhlaví tabulky „“:

td
{
padding:20px;
}
čt
{
padding:20px;
}

Výstup vypadá takto:

Výše uvedený výstup ukázal odsazení 20px a zarovnal text na střed.

Prvek stylu „tr“.

V souboru CSS přidejte vlastnost border-bottom pod selektor „tr“. Přiřadí se ke každému řádku tabulky včetně řádku záhlaví. Například nastavte jeho hodnotu na 2px solid darkcyan:

tr {
border-bottom: 2px plná tmavě azurová;
}

Po provedení výše uvedeného fragmentu kódu vypadá webová stránka takto:

To je vše o tom, jak přidat ohraničení na konec každého řádku tabulky “

“.

Závěr

Chcete-li přidat ohraničení na konec prvku , nastavte vlastnost CSS border-collapse na sbalení a použijte vlastnost border-bottom u prvku „“. Umožňuje vlastnosti CSS použít ohraničení na tabulku. Takto můžete ke každé značce „

“ snadno přidat spodní okraj.

Jak přidat okraj-dolní okraj do řádku tabulky?