如何将文字左旋90度，单元大小根据html中的文字进行调整
假设我有一些行和列的表，所以我想旋转的单元格中的文本是这样的
： 
问题是当我使用样式旋转文本：
#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>
您可以通过将旋转CSS应用到内部元素，然后调整元素的高度以匹配其宽度，因为该元素被旋转以适合<td> 。
还要确保你改变你的id #rotate到一个类，因为你有多个。
$(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>
丹尼尔·伊姆斯的答案是非常好的将你的CSS旋转应用到一个内部元素。 但是，可以通过不需要JavaScript的方式完成最终目标， 并且可以使用更长的文本string 。
通常情况下，在第一个表格列中具有垂直文本的全部原因是为了在短的水平空间中放置很长的一行文本，并沿着较高的内容行（如在您的示例中）或多行内容（我将在这个例子中使用）。
通过使用父TD标签上的“.rotate”类，我们不仅可以旋转内部DIV，还可以在父TD标签上设置一些CSS属性，这将强制所有文本保留在一行上，保持宽度为1.5em。 然后我们可以在内部DIV上使用一些负边距来确保它很好地居中。
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>
不幸的是，虽然我认为这些答案可能对我有用，但我正在努力寻找一个解决scheme，因为我在响应表中使用表 – 在这里使用overflow-x进行播放。
所以，考虑到这一点，看看这个链接更干净的方式，没有奇怪的宽度溢出问题。 它最终为我工作，很容易实现。
没有计算高度。 严格的CSS和HTML。 <span/>仅适用于Chrome浏览器，因为Chrome浏览器无法更改<th/>文字方向。
HTML：
<table> <tr> <th><span>Rotated text by 90 deg.</span></th> </tr> </table>
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; }
