Wenn eine HTML-Tabelle ohne sichtbare Tabellen- und Zellränder dargestellt werden soll, reicht border: none nur am table-Element nicht immer aus. Ein Theme oder Stylesheet kann zusätzlich Ränder an th und td setzen.
CSS für eine Tabelle ohne Rahmen
table {
border-collapse: collapse;
}
table,
table th,
table td {
border: none;
}
border-collapse: collapse legt fest, dass benachbarte Tabellenzellen ein gemeinsames Rahmenmodell verwenden. Die Eigenschaft entfernt einen vorhandenen Rahmen aber nicht automatisch. Dafür ist border: none zuständig.
Besser nur eine bestimmte Tabelle ansprechen
Damit du nicht unbeabsichtigt alle Tabellen auf der Website änderst, gib der gewünschten Tabelle eine eigene Klasse:
<table class="tabelle-ohne-rand">
...
</table>
.tabelle-ohne-rand,
.tabelle-ohne-rand th,
.tabelle-ohne-rand td {
border: none;
}
.tabelle-ohne-rand {
border-collapse: collapse;
}
Wenn trotzdem Linien erscheinen, kommt die Formatierung wahrscheinlich aus einem spezifischeren Theme- oder Block-Selektor. Dann solltest du im Browser mit „Untersuchen“ prüfen, welche CSS-Regel den Rand tatsächlich setzt.