Wie erstelle ich vertikal ausgerichtete HTML-Tabellen mit spaltenbasierter Anzeige?

Vertikal ausgerichtete HTML-Tabellen: Spaltenbasierte Anzeige erreichen

Vertikale Tabellen, bei denen Zeilen vertikal mit Tabellenüberschriften auf der linken Seite angezeigt werden, stellen in HTML eine einzigartige Herausforderung dar. Hier ist eine einfache Lösung für dieses Problem mithilfe von CSS:

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

Dieser Ansatz kehrt effektiv die Ausrichtung von Tabellenzellen um, sodass Sie mit auf sie zugreifen können. genau wie in einem normalen Tisch. Es ist jedoch wichtig zu beachten, dass diese Methode jede Zelle als einzelne Zeile behandelt und alle tabellenähnlichen Verhaltensweisen wie Rowspan oder Colspan verwirft.

Beispiel:

Zu Um dies zu veranschaulichen, betrachten Sie die folgende HTML-Tabelle, die mit dem vorgeschlagenen CSS markiert ist:

<code class="html"><table>
  <tr>
    <th>name</th>
    <th>number</th>
  </tr>
  <tr>
    <td>James Bond</td>
    <td>007</td>
  </tr>
  <tr>
    <td>Lucipher</td>
    <td>666</td>
  </tr>
</table></code>

Das Ergebnis ist eine vertikal ausgerichtete Tabelle mit zwei „Zeilen“ (dargestellt als Spalten) und zwei „Spalten“ (dargestellt als Zeilen).

Zusätzliche Überlegungen:

Um eine ordnungsgemäße Randwiedergabe sicherzustellen, können Sie das folgende CSS hinzufügen:

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

Dadurch wird das entfernt Obere und linke Ränder aller Zellen außer der ersten in jeder Zeile (Spalte), wodurch effektiv ein randloses Erscheinungsbild entsteht.

Das obige ist der detaillierte Inhalt vonWie erstelle ich vertikal ausgerichtete HTML-Tabellen mit spaltenbasierter Anzeige?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!