How to Rotate Text 90 Degrees in an HTML Table Without Messing Up Alignment?

Rotating Text Left 90 Degrees with Adjusted Cell Size Using HTML and CSS

To address the issue of rotated text messing up cell alignment in HTML tables, a more precise approach is required. Instead of using CSS transforms, we can utilize HTML and CSS's text direction and alignment properties.

The following code snippet employs this technique:

<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>

By applying the writing-mode property to the rotated text elements, we force the text to flow perpendicular to the axis of the rotated element. This ensures proper alignment and prevents text from overflowing into adjacent cells.

Notably, Chrome does not support the writing-mode property for th elements. To address this, we wrap the text in a span element and apply the -webkit-writing-mode property to ensure cross-browser compatibility.

The above is the detailed content of How to Rotate Text 90 Degrees in an HTML Table Without Messing Up Alignment?. For more information, please follow other related articles on the PHP Chinese website!