Wie erstelle ich vertikale Tabellenüberschriften mit CSS in HTML?

Vertikale Tabellenköpfe in HTML

In Standard-HTML-Tabellen werden Zeilen horizontal angezeigt, wobei sich die Tabellenköpfe oben befinden. Es gibt jedoch Situationen, in denen Sie möglicherweise Tabellen mit vertikalen Zeilen und Überschriften auf der linken Seite erstellen möchten.

Um dies zu erreichen, können Sie CSS nutzen, um die Anzeige von Zeilen und Tabellenzellen zu ändern. Eine einfache CSS-Korrektur wäre:

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

Dieser CSS-Code zwingt jede Zeile dazu, als Blockelement angezeigt zu werden und nach links zu schweben, wodurch effektiv vertikale Zeilen erstellt werden. Die Anzeige: Block; Durch die Einstellung für Tabellenzellen wird sichergestellt, dass diese auch als Blöcke innerhalb der vertikalen Zeilen angezeigt werden.

Beachten Sie, dass diese CSS-Lösung davon ausgeht, dass Ihre Tabellenzellen einzeilig sind. Wenn Sie mehrzeilige Zellen haben, kann das Tabellenverhalten fehlerhaft sein.

Um die Anzeige zu verbessern, können Sie zusätzliche CSS-Regeln hinzufügen, um Ränder zu verwalten und Ränder zu entfernen, wo sie nicht benötigt werden:

<code class="css">/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

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

Mit diesem CSS können Sie Tabellen mit vertikalen Zeilen erstellen, die sowohl optisch ansprechend sind als auch die Funktionalität zugänglicher Zeilen über beibehalten. Tags.

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