垂直旋转HTML表格标题单元格中的文本

问题描述

我使用下面的css旋转表格标题单元格内的文本，但标题单元格的宽度，如果文本是水平的。我如何旋转文本，宽度会自动减少..

I am using the following css to rotate the text inside table header cells but the header cells is of the same width as if the text were horizontal.How can I just rotate the text and the width will reduce automatically..

    table#MyTable tr th a{
    color: #FFFFFF;
    display: block;
    /*Firefox*/
    -moz-transform: rotate(-90deg);
    /*Safari*/
    -webkit-transform: rotate(-90deg);
    /*Opera*/
    -o-transform: rotate(-90deg);
    /*IE*/
    writing-mode: tb-rl;
    filter: flipv fliph;
    padding: 60px 1px;
}

推荐答案

单元格的宽度，并且它们只包含一行文本，您可以执行此操作： - 将元素的 width 设置为 line-height 。

If you need to adjust just the width of the cells and they contain only one line of text each you can do this: http://jsfiddle.net/sSP8W/3/ — set width of an element to it's line-height.

CSS3-transforms的问题是它们像CSS' position：relative 一样工作：它们的原始框保持不变，所以旋转，倾斜等。不要导致元素尺寸的更改。所以：真的没有完美的CSS解决方案，你可以使用JS来调整尺寸，或尝试找到黑客的解决方法。因此，如果您只有表格中的链接，则可以执行以下操作： - 旋转表格本身。

The problem with CSS3-transforms is that they work like as CSS' position: relative: their original box stays the same, so rotating, skewing etc. don't cause the changes in the element's dimensions. So: there is really no perfect CSS solution, you can use JS to adjust the dimensions, or try to find hackety workarounds. So if you have only links in a table, you can do something like that: http://jsfiddle.net/sSP8W/4/ — rotating the table itself.

如果您的案例有其他内容，您不想旋转 - 更新帖子，所以我们可以尝试找到一个更好解决方案。

If your case have another content that you don't want to rotate — update the post, so we could try to find a better solution.

upd：刚刚发现了一个表格中旋转文本的解决方案：使用一些魔法与垂直paddings，内容，因此，看看这个几乎最后的例子：

upd: Just found out a solution to the rotated text in tables: using some magic with vertical paddings we could make cells stretch to the content, so look at this almost final example: http://dabblet.com/gist/4072362

这篇关于垂直旋转HTML表格标题单元格中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！