Bagaimana untuk Memutar Teks 90 Darjah dalam Jadual HTML dengan Saiz Sel Boleh Laras?

Cara Memutar Teks 90 Darjah dengan Saiz Sel Boleh Laras dalam HTML

Apabila memutar teks dalam jadual HTML, adalah perkara biasa untuk menghadapi cabaran dalam mengekalkan ketekalan saiz sel. Untuk menangani perkara ini, mari kita terokai penyelesaian yang menggunakan CSS dan HTML tanpa memerlukan pengiraan ketinggian yang kompleks.

Caranya terletak pada menggunakan sifat CSS penjajaran menegak dan penjajaran teks untuk melaraskan orientasi teks dalam sel jadual . Selain itu, kami akan menggunakan sifat -ms-writing-mod, -webkit-writing-mod dan writing-mod untuk mendayakan penulisan teks menegak.

Untuk mencapai putaran 90 darjah, kami menggunakan transformasi : putar(180deg); untuk memastikan bahawa teks muncul secara menegak. Ambil perhatian bahawa teknik ini mungkin tidak berfungsi dengan sempurna dalam semua penyemak imbas, terutamanya Chrome, yang memerlukan penggunaan <span> elemen untuk membetulkan arah teks bagi pengepala jadual (<th>).

Berikut ialah contoh praktikal untuk ditunjukkan:

<code class="css">th {
  vertical-align: bottom;
  text-align: center;
}

th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}</code>

<code class="html">&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;&lt;span&gt;Rotated text by 90 deg.&lt;/span&gt;&lt;/th&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code>

Pendekatan ini membolehkan penggiliran teks dalam sel jadual sambil mengekalkan saiz sel yang dikehendaki. Terima teknik ini untuk paparan teks menegak tanpa kerumitan dalam jadual HTML anda, memastikan data anda dipersembahkan dengan jelas dan elegan.

Atas ialah kandungan terperinci Bagaimana untuk Memutar Teks 90 Darjah dalam Jadual HTML dengan Saiz Sel Boleh Laras?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!