首頁 > web前端 > css教學 > 如何在 HTML 表格中垂直旋轉文字?

如何在 HTML 表格中垂直旋轉文字?

Mary-Kate Olsen
發布: 2024-11-02 00:23:02
原創
500 人瀏覽過

How can I rotate text vertically in an HTML table?

HTML 表格中的垂直文字

在 HTML 表格單元格內垂直旋轉文字是最佳化密集表格空間的常見查詢。為了達到這種效果,一種流行的方法是利用轉換屬性來定義 CSS 樣式。

一種方法涉及使用CSS 旋轉屬性:

.box_rotate {
  -moz-transform: rotate(7.5deg);  /* FF3.5+ */
  -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
登入後複製

將此樣式應用於表格單元格中的文字將逆時針旋轉7.5 度:

<code class="html"><td>
  <div class="box_rotate">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</td></code>
登入後複製

此技術可讓您垂直轉換文本,有效節省具有大量標題或文本的表格的空間。

以上是如何在 HTML 表格中垂直旋轉文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板