如何旋转文本左90度和单元格大小调整根据文本在 html

假设我有一个包含行和列的表，所以我想在单元格中旋转文本，比如 < br > : enter image description here

问题是当我使用样式旋转文本时:

#rotate {
-moz-transform: rotate(-90.0deg);  /* FF3.5+ */
-o-transform: rotate(-90.0deg);  /* Opera 10.5 */
-webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */

一切都变得一团糟

Html 代码:

<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td id='rotate'>10kg</td>
<td >B</td>
<td >C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td id='rotate'>20kg</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td id='rotate'>30kg</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>




</table>

Css:

<style type="text/css">
td {
border-collapse:collapse;
border: 1px black solid;
}
tr:nth-of-type(5) td:nth-of-type(1) {
visibility: hidden;
}
#rotate {
-moz-transform: rotate(-90.0deg);  /* FF3.5+ */
-o-transform: rotate(-90.0deg);  /* Opera 10.5 */
-webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
</style>
206972 次浏览
小开
最佳答案

You can do that by applying your rotate CSS to an inner element and then adjusting the height of the element to match its width since the element was rotated to fit it into the <td>.

Also make sure you change your id #rotate to a class since you have multiple.

A 4x3 table with the headers in the first column rotated by 90 degrees

$(document).ready(function() {
$('.rotate').css('height', $('.rotate').width());
});
td {
border-collapse: collapse;
border: 1px black solid;
}
tr:nth-of-type(5) td:nth-of-type(1) {
visibility: hidden;
}
.rotate {
/* FF3.5+ */
-moz-transform: rotate(-90.0deg);
/* Opera 10.5 */
-o-transform: rotate(-90.0deg);
/* Saf3.1+, Chrome */
-webkit-transform: rotate(-90.0deg);
/* IE6,IE7 */
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
/* Standard */
transform: rotate(-90.0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<div class='rotate'>10kg</div>
</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>
<div class='rotate'>20kg</div>
</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>
<div class='rotate'>30kg</div>
</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>




</table>

JavaScript

The equivalent to the above in pure JavaScript is as follows:

jsFiddle

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';
}
});
小开

Daniel Imms answer is excellent in regards to applying your CSS rotation to an inner element. However, it is possible to accomplish the end goal in a way that does not require JavaScript and works with longer strings of text.

Typically the whole reason to have vertical text in the first table column is to fit a long line of text in a short horizontal space and to go alongside tall rows of content (as in your example) or multiple rows of content (which I'll use in this example).

enter image description here

By using the ".rotate" class on the parent TD tag, we can not only rotate the inner DIV, but we can also set a few CSS properties on the parent TD tag that will force all of the text to stay on one line and keep the width to 1.5em. Then we can use some negative margins on the inner DIV to make sure that it centers nicely.

td {
border: 1px black solid;
padding: 5px;
}
.rotate {
text-align: center;
white-space: nowrap;
vertical-align: middle;
width: 1.5em;
}
.rotate div {
-moz-transform: rotate(-90.0deg);  /* FF3.5+ */
-o-transform: rotate(-90.0deg);  /* Opera 10.5 */
-webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
margin-left: -10em;
margin-right: -10em;
}
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td class='rotate' rowspan="4"><div>10 kilograms</div></td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
    

<tr>
<td class='rotate' rowspan="4"><div>20 kilograms</div></td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
    

<tr>
<td class='rotate' rowspan="4"><div>30 kilograms</div></td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
    

</table>

One thing to keep in mind with this solution is that it does not work well if the height of the row (or spanned rows) is shorter than the vertical text in the first column. It works best if you're spanning multiple rows or you have a lot of content creating tall rows.

Have fun playing around with this on jsFiddle.

小开

Unfortunately while I thought these answers may have worked for me, I struggled with a solution, as I'm using tables inside responsive tables - where the overflow-x is played with.

So, with that in mind, have a look at this link for a cleaner way, which doesn't have the weird width overflow issues. It worked for me in the end and was very easy to implement.

https://css-tricks.com/rotated-table-column-headers/

小开

Without calculating height. Strict CSS and HTML. <span/> only for Chrome, because the chrome isn't able change text direction for <th/>.

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;
}
<table>
<tr>
<th><span>Rotated text by 90 deg.</span></th>
</tr>
</table>


提交答案