Ako pridať okraj-dolný okraj do riadka tabuľky?

Vlastnosť CSS „border-bottom“ sa používa na pridanie okraja na spodok akéhokoľvek prvku HTML. Nemá to však priamy vplyv na riadok tabuľky. Dôvodom je, že vlastnosť border-collapse má preddefinovanú hodnotu separát a neumožňuje štýl riadku. Táto príručka ukazuje, ako použiť spodný okraj na prvku tabuľky.

Ako pridať okraj-dolný okraj do riadka tabuľky ?
Nastavte border-bottom na prvok Table Row
Element tabuľky štýlu
Štýlový prvok „td“.
Štýlový prvok „tr“.

Ako pridať okraj-dolný okraj do riadka tabuľky ?

Pridaním okraja-dola do riadka tabuľky pridáte okraj do celého riadka, aby ste dosiahli lepší vizuálny zážitok a pritiahli pozornosť používateľa.

Podrobný príklad pridania border-bottom do riadka tabuľky je uvedený nižšie:

Nastavte border-bottom na riadok tabuľky

Vytvorte jednoduchú tabuľku obsahujúcu 3 riadky a 3 stĺpce v našom súbore HTML, ktoré sú vytvorené pomocou prvkov , a :

< tabuľky >
< tr trieda = 'riadok' >
< th > názov < / th >
< th > Postavenie < / th >
< th > Izba č < / th >
< / tr >
< tr trieda = 'riadok' >
< td > Fakhar < / td >
< td > Študent < / td >
< td > 05 < / td >
< / tr >
< tr trieda = 'riadok' >
< td > Omar < / td >
< td > Študent < / td >
< td > 05 < / td >
< / tr >
< / tabuľky >

Vo vyššie uvedenom úryvku kódu sme priradili triedu „riadok“ k riadkom tabuľky , aby k nim bolo možné pristupovať neskôr v CSS.

Webová stránka bude vyzerať takto:

Element tabuľky štýlu

V časti CSS vyberte prvok tabuľky a zarovnajte text na stred. Potom použite „ border-collapse ” vlastnosť na nastavenie jej hodnoty na zbalenie:

tabuľky
{
border-collapse: kolaps;
text-align: center;
}

Štýlový prvok „td“.

Pre lepšiu vizuálnu reprezentáciu dajme výplň 20px do prvkov tabuľky „“ a hlavičky tabuľky „“:

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

Výstup vyzerá takto:

Vyššie uvedený výstup ukázal výplň 20 pixelov a zarovnal text na stred.

Štýlový prvok „tr“.

V súbore CSS pridajte vlastnosť border-bottom pod selektor „tr“. Priraďuje sa ku každému riadku tabuľky vrátane riadku nadpisu. Napríklad nastavte jeho hodnotu na 2px plné tmavozelené:

tr {
border-bottom: 2px plná tmavozelená;
}

Po vykonaní vyššie uvedeného útržku kódu bude webová stránka vyzerať takto:

To je všetko o tom, ako pridať orámovanie na spodok každého riadku tabuľky “

“.

Záver

Ak chcete pridať orámovanie na spodok prvku , nastavte vlastnosť CSS border-collapse na zbalenie a použite vlastnosť border-bottom pre prvok „“. Umožňuje vlastnosti CSS aplikovať okraje na tabuľku. Takto môžete ku každej značke „

“ jednoducho pridať okraj.

Ako pridať okraj-dolný okraj do riadka tabuľky?