How can I rotate text vertically in an HTML table?

Vertical Text in HTML Tables

Rotating text vertically within HTML table cells is a common query for optimizing space in dense tables. To attain this effect, a popular approach leverages the transform property to define CSS styles.

One method involves the use of the CSS rotate property:

.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 */
}

By applying this style to a table cell, the text within will be rotated 7.5 degrees counterclockwise:

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

This technique allows you to transform text vertically, effectively saving space in tables with extensive headings or text.

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