CSS: Tabellen mit Innenlinien, aber ohne Außenrahmen

Bei einem Kundenprojekt stand ich in der Verlegenheit, eine zurückhaltend gestaltete Tabelle zu entwerfen, bei der die einzelnen Zeilen nur mit einer Linie separiert sind, wobei die Tabelle aber keinen Rahmen haben soll – sprich, es soll auch keine Linie über dem ersten bzw. unter dem letzten Eintrag geben. Hacks wie z.B. der ersten bzw. letzten Zeile eine abweichende CSS-Klasse zuzuweisen verboten sich schon von daher, weil die Zeilen der Tabelle in einer Schleife im Template dynamisch generiert werden. Ein border-top bzw. border-bottom erzeugt aber eben immer die entscheidende Linie zuviel. Ein auf dem table-Tag gesetztes border: none hatte ebenfalls keine Wirkung.

Zeit, um nach etwas Googlen eine mir bis date nicht bekannte Einstellung zu finden: border: hidden in Zusammenhang mit dem collapsing border model. Bei jenem geht es darum, die Rahmen verschiedener Elemente zusammenfallen zu lassen, so dass z. B. der rechte Rand einer Zelle und der linke Rand der rechts danebenliegenden Zelle nur eine einzelne Linie ergeben und nicht zwei.

Das collapsing border model hat gelegentlich Konflikte zu klären, nämlich wenn zwei Rahmen zusammenfallen sollen, die aber unterschiedlich aussehen. Das W3C hat dafür aber ein standardisiertes Regelwerk entwickelt, und dessen erste Regel lautet:

Borders with the ‚border-style‘ of ‚hidden‘ take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.

Wie praktisch – ein border: none auf der Tabelle erzeugt außenherum nämlich einen Rahmen, der in Konflikt mit dem border der Tabellenzellen steht, und da border: none die niedrigste Priorität hat (im Gegensatz zu border: hidden, was wie beschrieben die höchste hat), wirkt es nicht.

Das Ergebnis der Bemühungen:

table#example {
  border: hidden;
  border-collapse: collapse;
}
table#example td {
  border-top: solid 1px;
  padding: 0.5em;
}

<table id="example">
  <tbody>
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
    </tr>
  </tbody>
</table>

Und so sieht’s aus:

(Eine demütige Entschuldigung an alle User, die sich den Quellcode der Seite ansehen: WordPress entfernt beim Speichern aus mir nicht bekannten Gründen die style-Tags um das produktive CSS-Beispiel, so dass es nicht mehr funktioniert. Ich musste daher die Elemente einzeln direkt stylen. Sorry.)