How to Rotate Text Vertically in HTML Tables Using CSS?-CSS Tutorial-php.cn

How to Rotate Text Vertically in HTML Tables Using CSS?

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>

Copy after login

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>

Copy after login

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!

source：php.cn

Previous article：How to Achieve Correct jQuery Drag/Resize Behavior with CSS Transform Scale? Next article：How can I use CSS selectors to target elements whose IDs contain specific text and end with a specific string?

Statement of this Website

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