在 HTML 表格标题单元格内垂直旋转文本 [英] Vertically rotate text inside an HTML table header cell
问题描述
我正在使用以下 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;
}
推荐答案
如果您只需要调整单元格的宽度并且每个单元格只包含一行文本,您可以这样做:http://jsfiddle.net/sSP8W/3/ — 将元素的 width
设置为它的 行高
.
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 调整尺寸,或者尝试寻找 hackety 解决方法.因此,如果表中只有链接,则可以执行以下操作:http://jsfiddle.net/sSP8W/4/ — 旋转桌子本身.
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: 刚刚找到了表格中旋转文本的解决方案:使用一些带有垂直填充的魔法,我们可以使单元格拉伸到内容,所以看看这个几乎是最后一个例子:http://dabblet.com/gist/4072362
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 表格标题单元格内垂直旋转文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!