How to Rotate Text in HTML Tables Without Distorting Cell Size?

Using CSS to Rotate Text and Adjust Cell Size in HTML Tables

When attempting to rotate text in table cells, it's important to also consider the impact on the cell size. As illustrated in the provided example, when using CSS transforms to rotate text without adjusting the cell size, the result can be distorted.

To resolve this issue, adjustments to the table and cell styles are necessary. By setting vertical-align: bottom and text-align: center for table headers (th), the text is positioned correctly after rotation.

For Chrome specifically, it's necessary to wrap the rotated text within a element. This ensures that the text's direction is also changed, preventing horizontal text from appearing after rotation. The span element is subsequently styled with -ms-writing-mode: tb-rl, -webkit-writing-mode: vertical-rl, writing-mode: vertical-rl, transform: rotate(180deg), and white-space: nowrap.

Example Code

<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 implementing these style adjustments, it becomes possible to rotate text by 90 degrees while maintaining proper cell size and formatting.

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