Wie erstelle ich vertikale Tabellen in HTML?

Vertikales Tabellen-Rendering in HTML

Traditionell werden in HTML-Tabellen Daten horizontal mit Zeilen über die Seite hinweg angezeigt. Es gibt jedoch Fälle, in denen Sie möglicherweise vertikale Tabellen mit vertikal angezeigten Zeilen und links positionierten Kopfzeilen benötigen.

Um dies zu erreichen, kann CSS verwendet werden, um die Anzeigeeigenschaften der Tabelle zu ändern:

tr { display: block; float: left; }
th, td { display: block; }

Dieses CSS bewirkt, dass sich die Tabellenzeilen (-Elemente) wie Spalten verhalten und vertikal angezeigt werden. Sowohl Tabellenüberschriften () als auch Tabellendaten () werden ebenfalls vertikal angezeigt.

Es ist jedoch wichtig zu beachten, dass dieser Ansatz das Tabellenverhalten beseitigt und ihn für typische Tabellen ungeeignet macht Operationen. Um dieses Problem zu lösen, können Sie die CSS-Rahmenreduzierung verwenden:

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

Dieses CSS stellt sicher, dass die Ränder nur zwischen Tabellenzellen (nicht um die gesamte Spalte herum) angezeigt werden, wodurch der Eindruck einer ordnungsgemäß umrandeten Tabelle entsteht.

Durch die Implementierung dieser CSS-Regeln können Sie vertikale Tabellen in HTML erstellen und so Ihre Daten flexibler präsentieren.

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