En-têtes de colonne de table tournée… maintenant avec moins de numéros magiques!

Cet article explique comment faire tourner les en-têtes de colonne de table à l'aide de CSS, en évitant la nécessité de calculs trigonométriques. L'auteur avait précédemment abordé ce sujet, mais cette approche simplifie le processus en utilisant la géométrie au lieu de mathématiques complexes.

Le CSS CSS, remarquablement similaire à une solution précédente, est présenté en premier pour une référence rapide:

<th><div> En-tête de colonne 1</div></th>

 tableau {
  Border-Collapse: s'effondrer;
  - Table-Tableau de la largeur: 1px;
}
th.rotate {
  Espace blanc: Nowrap;
  Position: relative;
}
th.rotate> div {
  Position: absolue;
  en bas: 0;
  à gauche: 0;
  Texte-aligne: gauche;
  transformer:
    traduire (calc (100% - var (- table-border-width) / 2), var (- table-collaboration de la largeur)))
    Rotation (315deg);
  Transform-Origin: 0% CALC (100% - VAR (- Table-Border-Width));
  Largeur: 100%;
}
th.rotate> div> span {
  Position: absolue;
  en bas: 0;
  à gauche: 0;
  Border-Bottom: var (- table-tête-largeur) gris massif;
}
td {
  Border-Dight: var (- table-border-width) gris massif;
  largeur min: 30px;
  Tableau de rembourrage: 2px;
  padding-gauche: 5px;
  Texte-aligne: à droite;
}

L'article se plonge ensuite dans une explication détaillée. Directement en rotation<th> Les éléments présentent deux défis majeurs: le calcul de la largeur des colonnes basé sur la longueur du texte de l'en-tête (indésirable pour la réactivité) et la perte de la frontière pendant la rotation.<p> La solution utilise des imbriqués<code><div> et<code><span></span> éléments dans le<th> . Le<code><div> agit comme un conteneur, permettant un positionnement absolu et empêchant son contenu d'affecter la largeur de la colonne. Le<code><span></span> Maintient le texte et sa bordure inférieure, assurant un bon alignement.

La clé pour éviter des calculs complexes réside dans le choix stratégiquement de l' transform-origin . En définissant transform-origin: 0% calc(100% - var(--table-border-width)); , la rotation se produit autour d'un point qui aligne les frontières de manière transparente, éliminant le besoin d'ajustements trigonométriques. La fonction translate() positionne précisément l'élément rotatif.

Enfin, l'article suggère d'envelopper le tableau dans un conteneur Flexbox pour gérer l'augmentation de la hauteur causée par les en-têtes tournés. Exemple CSS pour ce conteneur est fourni. L'article conclut en mettant l'accent sur l'élégance et la simplicité de cette approche géométrique des en-têtes de table tournants.