jQuery表头对齐

Question

我对所有web编程都很陌生，想问一下……在下面的代码中，我如何对齐旋转的<th>字段，使表看起来正确，字段对齐，而不是离开屏幕?

这是我正在使用的旋转函数。(我只是发布它来摆脱错误，你真的需要看到jsfiddle链接真正知道我的意思)

.r90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
width: 1.25em;
line-height: 1ex;
font-family:verdana;
}

http://jsfiddle.net/michaela_elise/CFNHP/15/

Answer 1

将th文本包裹在span中，并尝试如下:

.r90 span {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    font-family:verdana;
    display:inline-block;
    line-height:80px;
    height:80px;
}

演示

---

如果您希望根据最长文本动态设置height和line-height，可以使用此函数:

var maxSpanHeight = 0;
$(".r90 span").each(function(){
    if (maxSpanHeight < $(this).width())
        maxSpanHeight = $(this).width();
}).css({
    'height':maxSpanHeight,
    'line-height':maxSpanHeight+'px'
});

演示

Answer 2

transform的特点是它不会影响其他样式。

如果你想对齐你的表，你将不得不使用javascript(或jQuery)来获得旋转单元格的宽度(宽度保持不变，即使他们被旋转)，并相应地调整表头行高

Answer 3

可以检查以下内容:jsFiddle

.r90 {
    height: 100px; width: 100px;          
             font-size: 16px;
             -moz-transform: rotate(90deg);
             -webkit-transform: rotate(90deg);
             -o-transform: rotate(90deg);
             -ms-transform: rotate(90deg);
             transform: rotate(90deg);
    }