如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小

Question

提问by lata

Suppose i have table with some rows and column,so i want to rotate text in cells something like this
: enter image description here

假设我有一些行和列的表格，所以我想旋转单元格中的文本，如下所示
：在此处输入图片说明

problem is when i rotate text using style :

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

#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 */

it all get messed up like this

一切都像这样搞砸了

html code:

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:

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>

Answer 1

采纳答案by Daniel Imms

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>.

您可以通过将旋转 CSS 应用于内部元素然后调整元素的高度以匹配其宽度来实现，因为该元素已旋转以适应<td>.

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

还要确保将您更改id#rotate为一个类，因为您有多个。

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

一个 4x3 表格，第一列中的标题旋转了 90 度

$(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:

纯 JavaScript 中的等价物如下：

jsFiddle

js小提琴

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

Answer 2

回答by 18C

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

不计算高度。严格的 CSS 和 HTML。<span/>仅适用于 Chrome，因为 chrome 无法更改<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>

Answer 3

回答by Abundant Designs

Daniel Immsanswer 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.

Daniel Imms在将 CSS 旋转应用于内部元素方面的回答非常出色。但是，可以通过不需要 JavaScript 并使用更长文本字符串的方式来实现最终目标。

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).

通常，在第一个表格列中放置垂直文本的全部原因是在较短的水平空间中放置一长行文本，并与高行内容（如您的示例）或多行内容（我将在本例中使用）。

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 标签上使用“.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>

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.

在jsFiddle上玩得开心。

Answer 4

回答by vr_driver

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.

不幸的是，虽然我认为这些答案可能对我有用，但我在寻找解决方案时遇到了困难，因为我在响应式表中使用了表 - 在这里使用了溢出-x。

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/

如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小

提问by lata

采纳答案by Daniel Imms

回答by 18C

回答by Abundant Designs

回答by vr_driver

相关推荐

最近更新

标签

如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小

提问by lata

采纳答案by Daniel Imms

回答by 18C

回答by Abundant Designs

回答by vr_driver

相关推荐

Html 水平滚动的图像列表

HTML 最佳实践：我应该使用 ’ 或特殊的键盘快捷键？

Html 如何让我的搜索栏真正工作？

Html & 和 & 有什么区别 在 HTML5 中？

相关推荐

最近更新

标签

Html & 和 & 有什么区别在 HTML5 中？