How can I rotate text vertically in HTML tables using CSS?

Rotating Text Vertically in HTML Tables

Rotating text in a HTML table cell by 90° perpendicularly can be achieved using CSS transformations. This method can be applied to both text headings and regular table cells, accommodating ample text while optimizing space utilization.

CSS Transformation Technique:

The CSS transform property enables the manipulation of elements' visual characteristics, including rotation. Here's a CSS snippet for rotating text:

<code class="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 */
}</code>

HTML Implementation:

To align text vertically within a table cell, assign the CSS class to the appropriate HTML element:

<code class="html"><div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div></code>

Browser Support:

The CSS transformations and filter techniques ensure cross-browser compatibility:

• Firefox 3.5
• Opera 10.5
• Safari 3.1
• Chrome
• Internet Explorer 6-8

Angle of Rotation:

The rotation angle of 7.5 degrees is optimal for readability. However, you can adjust it to meet your specific requirements.

Additional Observations:

• CSS prefixes are included for broader browser support.
• Ensure that the affected elements have sufficient height to accommodate the rotated text.
• Text alignment within rotated cells may vary slightly depending on the browser and font used.

The above is the detailed content of How can I rotate text vertically in HTML tables using CSS?. For more information, please follow other related articles on the PHP Chinese website!