Home > Article > Web Front-end > How to Rotate Text Vertically in HTML Tables Using CSS?

How to Rotate Text Vertically in HTML Tables Using CSS?

DDDOriginal: 2024-10-27 08:26:03721browse

Vertical Text in HTML Tables

Many HTML table cells contain headings that take up significant space. To conserve space, you may consider rotating the text vertically. Here's a portable solution for achieving this:

CSS Transform Method

This method utilizes CSS transformations to rotate the text. It supports various browsers and provides a cross-platform solution. Here's the CSS code:

<code class="css">.box_rotate {
  -moz-transform: rotate(7.5deg); /* Firefox 3.5+ */
  -o-transform: rotate(7.5deg); /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg); /* Safari 3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6, IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}</code>

HTML Usage

To use the rotation, simply wrap the text within a

element and apply the CSS class .box_rotate. Here's an example:

<code class="html"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>

<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div></code>

When implemented, the first and third

elements will display text horizontally, while the second

element (with the .box_rotate class) will display text that is rotated 7.5 degrees counterclockwise.

The above is the detailed content of How to Rotate Text Vertically in HTML Tables Using CSS?. For more information, please follow other related articles on the PHP Chinese website!

css html for while using class this display transform table

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Achieve Correct jQuery Drag/Resize Behavior with CSS Transform Scale?Next article：How to Achieve Correct jQuery Drag/Resize Behavior with CSS Transform Scale?

See more

How to Rotate Text Vertically in HTML Tables Using CSS?

Related articles