Vertikale HTML-Tabellen

Das Erstellen von HTML-Tabellen mit vertikalen Zeilen bietet eine einzigartige Möglichkeit, Daten anzuzeigen, wobei Zeilenköpfe darauf positioniert werden eher auf der linken als auf der oberen Seite. Um dies zu erreichen, kann CSS-Stil angewendet werden, um die Struktur der Tabelle zu transformieren.

CSS-Stil

Um Tabellenzeilen als vertikale Spalten darzustellen, gelten die folgenden CSS-Regeln kann verwendet werden:

tr {
  display: block;
  float: left;
}

th, td {
  display: block;
}

Dadurch werden die Tabellenzellen vertikal verschoben, wobei die entsprechenden Überschriften links von jeder Zeile angezeigt werden.

AngularJS-Integration

Die Aufrechterhaltung des Zugriffs auf Tabellenzeilen, die jetzt als Spalten angezeigt werden, kann durch die Einbindung der folgenden CSS-Regeln erreicht werden:

/* border-collapse */
tr>*:not(:first-child) {
  border-top: 0;
}

tr:not(:first-child)>* {
  border-left: 0;
}

Diese Regeln stellen sicher, dass Grenzen zwischen Tabellenzellen nur an den Rändern gerendert werden, wodurch eine klare Unterscheidung zwischen Zeilen gewährleistet wird. Durch die Verwendung dieser Techniken in Verbindung mit AngularJS können Sie Tabellendaten dynamisch bearbeiten und dabei die vertikale Ausrichtung beibehalten.