Jak dodać obramowanie dolne do wiersza tabeli?

Właściwość CSS „border-bottom” służy do dodawania obramowania na dole dowolnego elementu HTML. Chociaż nie wpływa to bezpośrednio na wiersz tabeli. Powodem jest to, że właściwość border-collapse ma z góry zdefiniowaną wartość separację i nie pozwala na styl wiersza. W tym przewodniku pokazano, jak zastosować dolne obramowanie elementu tabeli.

Jak dodać obramowanie dolne do wiersza tabeli ?
Ustaw border-bottom na Table Row Element
Element tabeli stylów
Element stylu „td”.
Element stylu „tr”.

Jak dodać obramowanie dolne do wiersza tabeli ?

Dodanie dolnej krawędzi do wiersza tabeli spowoduje dodanie obramowania do całego wiersza, aby zapewnić lepsze wrażenia wizualne i przyciągnąć uwagę użytkownika.

Szczegółowy przykład dodawania border-bottom do wiersza tabeli pokazano poniżej:

Ustaw border-bottom na wiersz tabeli

Utwórz prostą tabelę zawierającą 3 wiersze i 3 kolumny w naszym pliku HTML, które są wykonane przy użyciu elementów , i :

< tabela >
< tr klasa = 'wiersz' >
< cz > Nazwa < / cz >
< cz > Status < / cz >
< cz > Pokój numer < / cz >
< / tr >
< tr klasa = 'wiersz' >
< td > Fachar < / td >
< td > Student < / td >
< td > 05 < / td >
< / tr >
< tr klasa = 'wiersz' >
< td > Omar < / td >
< td > Student < / td >
< td > 05 < / td >
< / tr >
< / tabela >

W powyższym fragmencie kodu przypisaliśmy klasę „wiersz” do wierszy tabeli , aby można było uzyskać do nich dostęp później w CSS.

Strona internetowa będzie wyglądać następująco:

Element tabeli stylów

W części CSS wybierz element tabeli i wyrównaj tekst do środka. Następnie użyj „ upadek granicy ”, aby ustawić jej wartość na zwinięcie:

tabela
{
upadek granicy: upadek;
wyrównanie tekstu: środek;
}

Element stylu „td”.

Dla lepszej reprezentacji wizualnej dodajmy dopełnienie 20px dla danych tabeli „” i elementów nagłówka tabeli „”:

td
{
wypełnienie: 20px;
}
cz
{
wypełnienie: 20px;
}

Dane wyjściowe wyglądają następująco:

Powyższe dane wyjściowe pokazują dopełnienie 20 pikseli i wyrównanie tekstu do środka.

Element stylu „tr”.

W pliku CSS dodaj właściwość border-bottom pod selektorem „tr”. Przypisuje do każdego wiersza tabeli, w tym wiersza nagłówka. Na przykład ustaw jego wartość na 2px solid darkcyan:

tr {
obramowanie na dole: 2px jednolicie ciemnocyjanowe;
}

Po wykonaniu powyższego fragmentu kodu strona wygląda następująco:

To wszystko o tym, jak dodać obramowanie na dole każdego wiersza tabeli „

”.

Wniosek

Aby dodać obramowanie na dole elementu , ustaw właściwość CSS border-collapse na zwinięcie i użyj właściwości border-bottom w elemencie „”. Pozwala właściwości CSS zastosować obramowania do tabeli. W ten sposób możesz łatwo dodać obramowanie dolne do każdego tagu „

”.

Jak dodać obramowanie dolne do wiersza tabeli?