Wie füge ich einen unteren Rand zur Tabellenzeile hinzu?

Die „border-bottom“-Eigenschaft von CSS wird verwendet, um den Rahmen am unteren Rand jedes HTML-Elements hinzuzufügen. Allerdings wirkt es sich nicht direkt auf die Tabellenzeile aus. Der Grund dafür ist, dass die Eigenschaft „border-collapse“ den vordefinierten Wert „separat“ hat und den Stil der Zeile nicht zulässt. Diese Anleitung veranschaulicht, wie Sie einen unteren Rand auf des Tabellenelements anwenden.

Wie füge ich einen unteren Rand zur Tabellenzeile hinzu?
Legen Sie border-bottom auf das Tabellenzeilen--Element fest
Stiltabellenelement
Stil „td“-Element
Stil „tr“-Element

Wie füge ich einen unteren Rand zur Tabellenzeile hinzu?

Durch das Hinzufügen des unteren Rands zur Tabellenzeile wird der Rand zur gesamten Zeile hinzugefügt, um ein besseres visuelles Erlebnis zu schaffen und die Aufmerksamkeit des Benutzers zu erregen.

Ein detailliertes Beispiel für das Hinzufügen von border-bottom zur Tabellenzeile wird unten gezeigt:

Legen Sie border-bottom auf die Tabellenzeile fest

Erstellen Sie in unserer HTML-Datei eine einfache Tabelle mit 3 Zeilen und 3 Spalten, die aus den Elementen , und bestehen:

< Tisch >
< tr Klasse = 'Reihe' >
< Th > Name < / Th >
< Th > Status < / Th >
< Th > Raum Nummer < / Th >
< / tr >
< tr Klasse = 'Reihe' >
< td > Sachar < / td >
< td > Student < / td >
< td > 05 < / td >
< / tr >
< tr Klasse = 'Reihe' >
< td > Omar < / td >
< td > Student < / td >
< td > 05 < / td >
< / tr >
< / Tisch >

Im obigen Codeausschnitt haben wir den Tabellenzeilen eine Klasse „row“ zugewiesen, damit später im CSS darauf zugegriffen werden kann.

Die Webseite wird so aussehen:

Stiltabellenelement

Wählen Sie im CSS-Bereich das Tabellenelement aus und richten Sie den Text zentriert aus. Verwenden Sie danach die Funktion „ Grenzkollaps ”-Eigenschaft, um ihren Wert auf „collapse“ zu setzen:

Tisch
{
border-collapse: Zusammenbruch;
Textausrichtung: Mitte;
}

Stil „td“-Element

Für eine bessere visuelle Darstellung geben wir den Tabellendaten „“ und den Tabellenkopfelementen „“ einen Abstand von 20 Pixeln:

td
{
Polsterung:20px;
}
Th
{
Polsterung:20px;
}

Die Ausgabe sieht so aus:

Die obige Ausgabe hat den Abstand von 20 Pixeln gezeigt und den Text in der Mitte ausgerichtet.

Stil „tr“-Element

Fügen Sie in der CSS-Datei die Eigenschaft „border-bottom“ unter dem „tr“-Selektor hinzu. Es wird jeder Zeile der Tabelle zugewiesen, einschließlich der Kopfzeile. Legen Sie den Wert beispielsweise auf 2 Pixel Volltonblau fest:

tr {
Rand unten: 2 Pixel einfarbiges Dunkelcyan;
}

Nach der Ausführung des obigen Codeausschnitts sieht die Webseite folgendermaßen aus:

Hier geht es darum, wie man am Ende jeder Tabellenzeile einen Rahmen hinzufügt.

“.

Abschluss

Um am unteren Rand des -Elements einen Rahmen hinzuzufügen, stellen Sie die CSS-Eigenschaft „border-collapse“ auf „collapse“ ein und verwenden Sie die Eigenschaft „border-bottom“ für das „“-Element. Dadurch kann die CSS-Eigenschaft Rahmen auf die Tabelle anwenden. Auf diese Weise können Sie jedem „

“-Tag ganz einfach einen unteren Rand hinzufügen.

Wie füge ich einen unteren Rand zur Tabellenzeile hinzu?