Drehete Tischsäulenkopf -Header… jetzt mit weniger magischen Zahlen!

In diesem Artikel wird erläutert, wie die Säulenkopfzeile der Tabelle mit CSS gedreht werden, wodurch die Notwendigkeit trigonometrischer Berechnungen vermieden wird. Der Autor hat zuvor dieses Thema angesprochen, aber dieser Ansatz vereinfacht den Prozess durch die Verwendung von Geometrie anstelle einer komplexen Mathematik.

Das Kern -CSS, das einer früheren Lösung bemerkenswert ähnlich ist, wird zuerst als schnelle Referenz dargestellt:

<th><div> Säulenkopf 1</div></th>

 Tisch {
  Grenzkollapse: Zusammenbruch;
  -Table-Border-Width: 1px;
}
Th.Rotate {
  weißer Raum: Nowrap;
  Position: Relativ;
}
Th.Rotate> div {
  Position: absolut;
  unten: 0;
  links: 0;
  Text-Align: links;
  verwandeln:
    Translate (calc (100%-var (-Tabellen-Grad-Breite) / 2), var (-Tabellen-Bordum)))
    drehen (315 Grad);
  Transform-Origin: 0% Calc (100%-var (-TABLE-BORDTHTH));
  Breite: 100%;
}
Th.Rotate> div> span {
  Position: absolut;
  unten: 0;
  links: 0;
  Border-Bottom: var (-Tabellen-Gr-Breite) Festes Grau;
}
td {
  Grenze-Rechts: var (-Tabelle-Grab-Breite) Festes Grau;
  Min-Width: 30px;
  Padding-Top: 2px;
  Padding-Links: 5px;
  Text-Align: Recht;
}

Der Artikel befasst sich dann mit einer detaillierten Erklärung. Direkt rotieren<th> Elemente stellt zwei große Herausforderungen vor: Säulenbreite berechnet auf der Header -Textlänge (unerwünscht für die Reaktionsfähigkeit) und den Verlust der Grenze während der Rotation.<p> Die Lösung verwendet verschachtelt<code><div> Und<code><span></span> Elemente innerhalb der<th> . Der<code><div> fungiert als Container, wodurch die absolute Positionierung ermöglicht wird und verhindern, dass der Inhalt die Spaltenbreite beeinflusst. Der<code><span></span> Hält den Text und seinen unteren Rand und sorgt für die richtige Ausrichtung.

Der Schlüssel zur Vermeidung komplexer Berechnungen liegt in der strategischen Auswahl des transform-origin . Durch Einstellen transform-origin: 0% calc(100% - var(--table-border-width)); Die Rotation erfolgt um einen Punkt, an dem die Grenzen nahtlos ausgerichtet sind und die Notwendigkeit trigonometrischer Anpassungen beseitigt. Die Funktion translate() positioniert genau das gedrehte Element.

Schließlich schlägt der Artikel vor, die Tabelle in einen Flexbox -Behälter zu wickeln, um die durch die gedrehte Header verursachte erhöhte Höhe zu verwalten. Beispiel CSS für diesen Container wird bereitgestellt. Der Artikel schließt mit der Betonung der Eleganz und Einfachheit dieses geometrischen Ansatzes für rotierende Tabellenkopfzeile.