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>

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>

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!

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