Rahmen aus einer HTML-Tabelle entfernen

Um sichtbare Rahmen einer HTML-Tabelle auszublenden, setzen Sie die CSS-Eigenschaft border für die Tabelle und die Zellen, an denen keine Linie erscheinen soll, auf none. Mit border-collapse: collapse werden dagegen angrenzende Zellrahmen zu einer gemeinsamen Linie zusammengeführt; die Eigenschaft entfernt die Rahmen nicht. Diese Unterscheidung ist auch hilfreich, wenn Tabellenzellen Bilder oder andere Inhalte enthalten: border-collapse beeinflusst, wie angrenzende Rahmen zusammentreffen, während border: none die gerenderten Rahmen der ausgewählten Elemente entfernt.

border-collapse: collapse verwenden, um angrenzende Zellrahmen in HTML zusammenzuführen

Die CSS-Eigenschaft border-collapse legt fest, ob eine Tabelle das getrennte oder das zusammengeführte Rahmenmodell verwendet. Bei collapse werden angrenzende Zellrahmen zusammengeführt. Zwei Zellen zeichnen daher an ihrer gemeinsamen Kante nicht jeweils eine eigene Linie. Vorhandene Rahmen können am äußeren Tabellenrand und um die Zellen weiterhin sichtbar sein; diese Deklaration entfernt sie nicht. Sie setzt auch den Abstand nicht auf null. Im getrennten Modell steuert border-spacing den Abstand zwischen den Zellrahmen. Im zusammengeführten Modell werden angrenzende Rahmen stattdessen kombiniert, daher lässt sich eine sichtbare Linie in diesem Modell nicht durch Ändern von border-spacing beheben.

Das folgende kleine HTML-Beispiel enthält zwei Zellen mit Rahmen. Die Regel für die Tabelle führt die Linien an der gemeinsamen Kante zusammen, während die Regel für die Zellen die Linien sichtbar lässt:

const example = `<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>`;
console.log(example);

<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>

Ersetzen Sie den Beispieltext in den Zellen durch eigene Inhalte. Dazu können auch Bildelemente gehören, wenn die Zellen Bilder aufnehmen. Das CSS funktioniert mit gewöhnlichen <td>- und <th>-Zellen und ist nicht von einem Bilddienst abhängig. Die Deklaration padding schafft Platz innerhalb einer Zelle; sie bestimmt nicht den Abstand zwischen getrennten Zellrahmen. Wenn Sie ein Raster mit gemeinsamen Linien möchten, behalten Sie den Zellrahmen bei und verwenden Sie collapse. Sollen keine Linien erscheinen, entfernen Sie die passenden Rahmendeklarationen wie im folgenden Abschnitt beschrieben.

Die CSS-Eigenschaft border auf none setzen, um Rahmen einer HTML-Tabelle zu entfernen

Um Rahmen auszublenden, setzen Sie border: none für die Tabelle und für jede Art von Zelle, deren Rahmen verschwinden soll. Ein Selektor wie table, th, td erfasst gemeinsam die Tabelle, Kopfzellen und Datenzellen. Ist der äußere Tabellenrahmen bereits nicht sichtbar und sind nur noch Zelllinien vorhanden, kann th, td gezielt nur diese Zellen auswählen. Der Selektor bestimmt, welche Elemente die Deklaration erhalten; die CSS-Kaskade entscheidet, welche passende Deklaration gilt. Eine spezifischere Regel kann einen allgemeinen Selektor übersteuern. Bei gleicher Spezifität gewinnt die später angegebene Deklaration.

Die Eigenschaft border ist eine Kurzschreibweise für border-width, border-style und border-color. Wird sie auf none gesetzt, verschwindet der gerenderte Rahmen der ausgewählten Elemente; Zellinnenabstände und Inhalte bleiben davon unberührt. Ein Stylesheet kann zum Beispiel table, th, td { border: none; } verwenden, wenn alle drei Elementarten keinen sichtbaren Rahmen haben sollen. Ergänzen Sie border-collapse: collapse nur dann, wenn die Tabelle außerdem das zusammengeführte Rahmenmodell verwenden soll; border-collapse ersetzt border: none nicht.

Bleibt eine Linie sichtbar, prüfen Sie, welches Element sie zeichnet. Für einen Rahmen an der Tabelle muss eine Regel die Tabelle erfassen; stammt die Linie von einer Kopf- oder Datenzelle, muss der Selektor th beziehungsweise td berücksichtigen. Prüfen Sie danach, ob eine andere Stylesheet-Regel Ihre Deklaration übersteuert. So beschränken Sie die Korrektur auf die Elemente mit Rahmen und ändern nicht versehentlich andere Tabellenabstände oder Inhalte.