Füge dem Tabellenzeilen-Element <tr> einen unteren Rand hinzu.

Question

Ich habe eine Tabelle von 3 mal 3. Ich brauche eine Möglichkeit, einen Rand für den unteren Teil jeder Zeile tr hinzuzufügen und ihm eine spezifische Farbe zu geben.

Zuerst habe ich den direkten Weg ausprobiert, d.h.:

Aber das hat nicht funktioniert. Also habe ich CSS hinzugefügt wie folgt:

tr {
border-bottom: 1pt solid black;
}

Aber das hat immer noch nicht funktioniert.

Ich würde es vorziehen, CSS zu verwenden, denn dann muss ich nicht jedem Zeile ein style Attribut hinzufügen. Ich habe kein border Attribut zur`

hinzugefügt. Ich hoffe, dass das meine CSS nicht beeinflusst.`

Answer 1

Another solution to this is border-spacing Eigenschaft:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

   ABC
   XYZ

Answer 2

Ich habe festgestellt, dass bei Verwendung dieser Methode der Abstand zwischen den td-Elementen dazu führte, dass eine Lücke im Rand entstand, aber keine Angst...

Ein Weg, dies zu umgehen:

        Beispiel für normale Tabellendaten

        /* hier nichts einfügen */ 

Mit dem CSS:

td.end{
    border:2px solid black;
}

Answer 3

Sie können dasselbe auch für die gesamte Zeile tun.

Es gibt border-bottom-style, border-top-style,border-left-style,border-right-style. Oder einfach border-style, das sich auf alle vier Ränder gleichzeitig auswirkt.

Sie können mehr Details sehen (und SICH SELBST AUSPROBIEREN online) hier

Answer 4

Einige interessante Antworten. Wenn Sie nur einen oberen (oder unteren) Rahmen möchten, hier sind zwei weitere. Wenn Sie einen blauen Rahmen mit einer Dicke von 3px möchten. Im Style-Bereich könnten Sie hinzufügen

.blueB {background-color:blue; height:3px} oder
hr {background-color:blue; color:blue height:3px}

Im Tabellencode entweder

Answer 5

Kein CSS-Rand unten:

            Titel