How to Rotate Text in HTML Table Cells Using CSS Transforms?-CSS Tutorial-php.cn

How to Rotate Text in HTML Table Cells Using CSS Transforms?

Susan Sarandon

Release： 2024-10-28 08:01:29

Original

891 people have browsed it

How to Rotate Text in HTML Table Cells Using CSS Transforms?

Rotating Text in HTML Table Cells

As HTML tables are widely used to organize and display tabular data, the ability to rotate text within their cells can be beneficial in space-constrained situations, particularly for lengthy headings.

Utilizing CSS Transforms

A robust and portable solution to rotate text in HTML tables is through CSS transforms. By employing CSS3 transform properties, you can achieve 90-degree rotations without compromising the cell's layout or functionality. The following CSS code demonstrates how to rotate text by 7.5 degrees:

<code class="css">.box_rotate {
    -moz-transform: rotate(7.5deg);
    -o-transform: rotate(7.5deg);
    -webkit-transform: rotate(7.5deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
}</code>

Copy after login

Example Implementation

To illustrate the implementation, consider the following HTML code:

<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

In this example, the box_rotate class is applied to the second

, rotating its text by 7.5 degrees. As a result, the text in that specific cell is rendered vertically, aligning vertically within the table column.

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