Wie erstelle ich vertikale HTML-Tabellen mit CSS und AngularJS?

Vertikale HTML-Tabellen

Das Erstellen von HTML-Tabellen mit vertikalen Zeilen bietet eine einzigartige Möglichkeit, Daten anzuzeigen, wobei Zeilenüberschriften darauf positioniert sind 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:

<code class="css">tr {
  display: block;
  float: left;
}

th, td {
  display: block;
}</code>

Dadurch fließen die Tabellenzellen vertikal, 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 Integration der folgenden CSS-Regeln erreicht werden:

<code class="css">/* border-collapse */
tr>*:not(:first-child) {
  border-top: 0;
}

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

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich vertikale HTML-Tabellen mit CSS und AngularJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!