How to Rotate Text Left 90 Degrees and Adjust Cell Size Accordingly in HTML

Playing with text dimensions

Got text content as dynamic as a salsa dancer? Don't fret! You can make your table cells adjust their skirts, uh, I mean widths, to the beat of your ever-changing text. Use JavaScript for those fancy dynamic moves, and make sure your table is in sync with your content's rhythm.

Dancing Headers

Headers sometimes want to walk on the ramp, sideways! <th> and <span> can be your models strutting in style with transform: rotate(-90deg) and white-space: nowrap.

<th>
  <span style="display: block; transform: rotate(-90deg); white-space: nowrap;">
    Catwalk Text 🕺🏻
  </span>
</th>


Use JavaScript for some behind-the-curtain magic and adjust the cell width to the length of our ramp-walking header.

Browser compatibility techniques

Just as you wouldn't want your dance moves to go out of sync to different tunes, you must ensure your text rotations vibe with different browsers. Include vendor prefixes for the transform property. You can also use the writing-mode property as a back-up dancer for vertical text display, though its moves are not the same as transform.

//here's your Reddit joke: "Why do programmers prefer iOS development? Because on iOS, there are no Windows or Androids to jump out of when the code doesn't work!"

Style guide for your rotating text

Ready to be the director of your own dance show? Make your rotated text performance visually captivating:

• Use negative margins to make those precise alignment adjustments.
• Hide or style cell borders for seamless transitions between different dance moves, uh, I mean cells!
• Assign CSS dances, I mean classes, instead of inline styles for clean choreography.

Ready for the alignment championship?

Nailing the perfect alignment once your text has taken the plunge is crucial. Your text needs to center-aligned to pull off its acrobatic feat. Use vertical-align: middle and text-align: center in synchronization to make the dive smooth.

Let's get bulk rotations done

Got an army of elements to rotate? Prepare them for the rotation drill with dedicated CSS classes. This makes your style uniform and combat-ready.

//another Reddit joke: "Why don't programmers like nature? It has too many bugs."

.cssMilitaryDrill {
  transform: rotate(-90deg);
  transform-origin: bottom left;
  white-space: nowrap;
}


And now, let your HTML soldiers march:

<td>
  <div class="cssMilitaryDrill">Attention! 🔄 Salute! 🙋‍♂️</div>
</td>


Overflow issues: Don't let your text 'fall off the stage'!

Beware of overflow issues, or your rotated header could end up doing a stage dive! Scale the headers according to the responsive designs to ensure they keep performing even on a smaller stage.