jQuery表头对齐

我对所有的网络编程都很陌生，我想问一下。。。在下面的代码中，如何对齐旋转的

字段，使表格看起来正确，字段对齐，而不是离开屏幕

这是我正在使用的旋转函数。（我只是发布了它以消除错误，您确实需要查看JSFIDLE链接才能真正了解我的意思）

---

转换的关键在于它不会真正影响其他样式

---

如果要对齐表格，则必须使用javascript（或jQuery）获取旋转单元格的宽度（即使它们旋转，宽度也保持不变），并相应地调整表格标题行高度

将

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

---

如果要根据最长文本动态设置

高度

和

行高度

，可以使用此功能：

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

var maxSpanHeight=0；
$（“.r90 span”）。每个（函数（）{
如果（maxSpanHeight<$（this）.width（））
maxSpanHeight=$（this）.width（）；
}).css({
“高度”：maxSpanHeight，
“行高”：maxSpanHeight+“px”
});

---

您能检查以下各项吗：

---

非常感谢你们！！我将合并所有三个答案，因为表格标题将动态插入。后续。。。我了解如何获取列标题宽度。如何动态设置类行高度和高度？attr（）函数？我现在可以动态地获取最大宽度。我该如何让柱子更薄？正如您将在下面的代码中看到的，第4列非常宽。当一个元素被转换时，唯一改变的是你在页面上看到它的方式。它所占用的空间保持不变，因此，即使它旋转，其宽度仍然相同，并且会影响列宽。我建议将thad

th

宽度设置得更小，并设置

空白：nowrap

，这样它就不会包装标题文本

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

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