Bagaimana untuk Memutar Teks 90 Darjah dalam Jadual HTML Tanpa Menjajarkan Jajaran?

Memutar Teks Ke Kiri 90 Darjah dengan Saiz Sel Dilaraskan Menggunakan HTML dan CSS

Untuk menangani isu teks diputar yang mengacaukan penjajaran sel dalam HTML jadual, pendekatan yang lebih tepat diperlukan. Daripada menggunakan transformasi CSS, kami boleh menggunakan ciri arah dan penjajaran HTML dan CSS.

Coretan kod berikut menggunakan teknik ini:

<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"><table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table></code>

Dengan menggunakan mod penulisan harta kepada elemen teks yang diputar, kami memaksa teks mengalir berserenjang dengan paksi unsur yang diputar. Ini memastikan penjajaran yang betul dan menghalang teks daripada melimpah ke dalam sel bersebelahan.

Terutamanya, Chrome tidak menyokong sifat mod penulisan untuk elemen ke. Untuk menangani perkara ini, kami membalut teks dalam elemen span dan menggunakan sifat -webkit-writing-mode untuk memastikan keserasian merentas pelayar.

Atas ialah kandungan terperinci Bagaimana untuk Memutar Teks 90 Darjah dalam Jadual HTML Tanpa Menjajarkan Jajaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!