Implementing 90-Degree Left Text Rotation with Cell Size Adjustment in HTML Tables Using CSS and JavaScript

Introduction

In web development, tables are commonly used components for displaying structured data. However, when vertical text needs to be displayed in table cells, traditional CSS rotation methods often lead to layout chaos. Based on high-scoring solutions from Stack Overflow, this paper provides an in-depth analysis of how CSS and JavaScript can work together to achieve precise text rotation and intelligent cell adjustment.

Problem Analysis

The original problem describes an HTML table with multiple rows and columns, where the first column needs to display text rotated 90 degrees to the left (such as "10kg", "20kg", etc.). Initial attempts using the CSS transform: rotate(-90deg) property successfully rotated the text but disrupted the table layout, preventing cells from properly adapting to the rotated content.

The key issue is that CSS transformations only change the visual presentation of elements without affecting their actual dimensions in the document flow. Therefore, rotated elements maintain their original width and height, causing layout misalignment.

Core Solutions

Method 1: CSS writing-mode Property (Pure CSS Solution)

For simple vertical text requirements, the CSS writing-mode property can be used, which is specifically designed to control text direction. Combined with transform rotation, a pure CSS vertical text effect can be achieved:

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

The corresponding HTML structure is:

<table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table>

The advantage of this method is that it requires no JavaScript, but compatibility should be considered, especially with older browsers' support for writing-mode.

Method 2: CSS Transform with JavaScript Dynamic Adjustment (Recommended Solution)

This is the accepted best answer, which applies rotation styles to inner elements and uses JavaScript to dynamically calculate and set heights, ensuring rotated content perfectly fits within cells.

First, change the CSS selector from ID to class since multiple elements need the same style:

.rotate {
  -moz-transform: rotate(-90.0deg);
  -o-transform: rotate(-90.0deg);
  -webkit-transform: rotate(-90.0deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  transform: rotate(-90.0deg);
}

The HTML structure is adjusted accordingly by adding <div> elements inside each cell that requires rotation:

<td>
  <div class='rotate'>10kg</div>
</td>

The crucial step is using JavaScript to dynamically set the height of rotated elements equal to their width after page load:

// jQuery version
$(document).ready(function() {
  $('.rotate').css('height', $('.rotate').width());
});

// Pure JavaScript version
window.addEventListener('load', function () {
    var rotates = document.getElementsByClassName('rotate');
    for (var i = 0; i < rotates.length; i++) {
        rotates[i].style.height = rotates[i].offsetWidth + 'px';
    }
});

The principle behind this method is: when text is rotated -90 degrees, the original width becomes the visual height. By setting the element's actual height to its pre-rotation width, sufficient vertical space is ensured for the rotated content while maintaining table layout integrity.

Method 3: CSS Negative Margin Adjustment (Advanced Solution)

For complex table layouts spanning multiple rows, more precise CSS control can be employed:

.rotate {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  width: 1.5em;
}

.rotate div {
  -moz-transform: rotate(-90.0deg);
  -o-transform: rotate(-90.0deg);
  -webkit-transform: rotate(-90.0deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  margin-left: -10em;
  margin-right: -10em;
}

This approach uses fixed column widths and negative margins to fine-tune the positioning of rotated elements, particularly suitable for tables with larger row heights.

Technical Details Analysis

How CSS Transform Works

The transform property alters the visual presentation of elements through matrix transformations, including rotation, scaling, skewing, and translation. Importantly, these transformations do not affect the element's original dimensions and position in the document flow, which is why additional height adjustment is necessary.

Browser Compatibility Considerations

The provided CSS code includes multiple browser prefixes to ensure proper display in Firefox, Opera, Safari, Chrome, and older versions of IE. Modern browsers generally support the standard transform property, but for maximum compatibility, retaining prefixed versions is recommended.

Performance Optimization Suggestions

For large tables, frequent DOM operations may impact performance. Consider the following optimization strategies:

• Use CSS will-change: transform to hint browsers for提前 optimization
• Batch process elements in JavaScript to reduce reflow次数
• Consider using CSS variables for dynamic尺寸 calculations to reduce JavaScript dependency

Practical Application Scenarios

This text rotation technology has wide applications in practical projects:

• Vertical headers in data reports
• Measurement unit displays in product specification tables
• Timeline labels in schedule tables
• Any scenario requiring horizontal space saving while maintaining readability

Conclusion

By combining CSS visual transformation capabilities with JavaScript dynamic calculations, layout problems caused by text rotation in HTML tables can be effectively resolved. The recommended Method 2 offers the best compatibility and flexibility, while other methods provide alternatives for specific scenarios. Developers should choose the most suitable implementation based on specific requirements, while paying attention to browser compatibility and performance optimization.

As web standards continue to evolve, future CSS features may provide simpler vertical text solutions, but in the current technical environment, the methods introduced in this paper remain reliable and practical choices.