How to Rotate Text 90 Degrees in HTML Tables with Adjustable Cell Size?

How to Rotate Text 90 Degrees with Adjustable Cell Size in HTML

When rotating text in HTML tables, it's common to encounter challenges in maintaining cell size consistency. To address this, let's explore a solution that employs CSS and HTML without the need for complex height calculations.

The trick lies in using the vertical-align and text-align CSS properties to adjust the text orientation within table cells. Additionally, we'll utilize the -ms-writing-mode, -webkit-writing-mode, and writing-mode properties to enable vertical text writing.

To achieve a 90-degree rotation, we apply a transform: rotate(180deg); to ensure that the text appears vertically. Note that this technique may not work perfectly in all browsers, particularly Chrome, which requires the use of elements to correct the text direction for table headers ().

Here's a practical example to demonstrate:

<code class="css">th {
  vertical-align: bottom;
  text-align: center;
}

th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}</code>

<code class="html"><table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table></code>

This approach allows for the rotation of text in table cells while preserving the desired cell size. Embrace this technique for hassle-free vertical text display in your HTML tables, ensuring that your data is presented clearly and elegantly.

The above is the detailed content of How to Rotate Text 90 Degrees in HTML Tables with Adjustable Cell Size?. For more information, please follow other related articles on the PHP Chinese website!