Tajuk Lajur Meja Berputar ... Sekarang dengan nombor sihir yang lebih sedikit!

Artikel ini menerangkan cara memutar tajuk lajur jadual menggunakan CSS, mengelakkan keperluan pengiraan trigonometri. Penulis sebelum ini menangani topik ini, tetapi pendekatan ini memudahkan proses dengan menggunakan geometri dan bukannya matematik yang kompleks.

CSS teras, sangat mirip dengan penyelesaian sebelumnya, dibentangkan pertama untuk rujukan cepat:

<th><div> Tajuk lajur 1</div></th>

 Jadual {
  Sempadan-keruntuhan: runtuh;
  --Table-Sempadan-lebar: 1px;
}
th.rotate {
  ruang putih: nowrap;
  Kedudukan: Relatif;
}
th.rotate> div {
  Kedudukan: Mutlak;
  Bawah: 0;
  Kiri: 0;
  Teks-Align: Kiri;
  Transform:
    Terjemahan (calc (100%-var (-jadual-sempadan lebar) / 2), var (-Jadual-sempadan lebar))
    berputar (315deg);
  Transform-Origin: 0% Calc (100%-var (-Jadual-sempadan lebar));
  Lebar: 100%;
}
th.rotate> div> span {
  Kedudukan: Mutlak;
  Bawah: 0;
  Kiri: 0;
  Sempadan-Bottom: var (-Jadual-sempadan lebar) kelabu pepejal;
}
TD {
  Sempadan-kanan: var (-meja-sempadan lebar) kelabu pepejal;
  Min-lebar: 30px;
  Padding-top: 2px;
  padding-left: 5px;
  Teks-Align: Betul;
}

Artikel itu kemudian menyelidiki penjelasan terperinci. Secara langsung berputar<th> Elemen membentangkan dua cabaran utama: Pengiraan lebar lajur berdasarkan panjang teks header (tidak diingini untuk respons) dan kehilangan sempadan semasa putaran.<p> Penyelesaiannya menggunakan bersarang<code><div> dan<code><span></span> unsur -unsur dalam<th> . The<code><div> Bertindak sebagai bekas, membolehkan kedudukan mutlak dan menghalang kandungannya daripada menjejaskan lebar lajur. The<code><span></span> Memegang teks dan sempadan bawahnya, memastikan penjajaran yang betul.

Kunci untuk mengelakkan pengiraan kompleks terletak secara strategik memilih transform-origin . Dengan menetapkan transform-origin: 0% calc(100% - var(--table-border-width)); , putaran berlaku sekitar satu titik yang menyelaraskan sempadan dengan lancar, menghapuskan keperluan untuk pelarasan trigonometri. Fungsi translate() tepat meletakkan elemen berputar.

Akhirnya, artikel itu mencadangkan membungkus jadual dalam bekas Flexbox untuk menguruskan ketinggian yang meningkat yang disebabkan oleh tajuk berputar. Contoh CSS untuk bekas ini disediakan. Artikel ini menyimpulkan dengan menekankan keanggunan dan kesederhanaan pendekatan geometri ini kepada tajuk meja berputar.