Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Memutar Teks 90 Darjah dalam Jadual HTML Tanpa Menjajarkan Jajaran?

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

DDD
DDDasal
2024-10-31 19:27:29862semak imbas

How to Rotate Text 90 Degrees in an HTML Table Without Messing Up Alignment?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn