CSS: Wie erhalte ich einen Rahmen am unteren Rand von Tabellenzeilen, außer in der letzten Zeile?

Question

Ich habe eine variable Anzahl von Tabellenzeilen (n), und ich möchte, dass der Rand unten für die Zeilen 0 (n-1) gilt

Wie kann ich das tun?

Answer 1

Sie haben zwei Möglichkeiten: (1) Sie fügen der letzten Zeile eine spezielle Klasse im HTML-Code hinzu, oder (2) Sie verwenden die :last-child Pseudoklasse in Ihrem CSS.

Option 1: Spezialisierte Klasse

Wenn Sie Klassen auf Ihr HTML anwenden können, können Sie der letzten Zeile eine spezielle Klasse hinzufügen. Wenn Ihr Markup von einem serverseitigen Skript (z. B. einem PHP-Skript) generiert wird, müssen Sie dieses Skript bearbeiten, um ähnliche Markups hinzuzufügen.

HTML:

<table>
   <tr>
      <td>
      </td>
   </tr>
   <tr>
      <td>
      </td>
   </tr>
   <tr class="last">
      <td>
      </td>
   </tr>
</table>

CSS:

table
{
   border-collapse:collapse;
}
tr
{
   border-bottom: 1px solid #000;
}
tr.last
{
   border-bottom: none;
}

Option 2: CSS-Pseudoklasse

Die Alternative ist die Verwendung der :last-child CSS-Pseudoklasse. Die Verwendung der :last-child Klasse erfordert keine Änderungen am HTML-Code und kann daher die bessere Wahl sein, wenn Sie nicht in der Lage sind, den HTML-Code zu ändern. Das CSS ist fast identisch mit dem oben genannten:

CSS:

table
{
   border-collapse:collapse;
}
tr
{
   border-bottom: 1px solid #000;
}
tr:last-child
{
   border-bottom: none;
}

Der Nachteil dieses Ansatzes ist, dass Versionen von Internet Explorer vor 9 unterstützen nicht die :last-child Pseudoklasse.

Answer 2

Ich weiß, dies ist eine alte Frage, aber es ist erwähnenswert, dass jetzt mit CSS3 alles, was Sie tun müssen, ist die Verwendung der not() Selektor in Ihrem CSS, etwa so:

tr:not(:last-child) {
    border-bottom: 1px solid #E3E3E3;
}

Answer 3

tr:last-child td {
    border-bottom: none;
}

Das erspart Ihnen das Anlegen einer Klasse am letzten Tag.

Answer 4

Dies wird bei jedem Klassenaufruf in html verwendet

tr:last-child {
    border-bottom: none;
}

Answer 5

Sie können auch so vorgehen

table tr:not(:last-of-type) { border-bottom: none; }