表头文本转换

我已经使用transform：rotate（270deg）作为表头，但由于头部中的名称不相等（甚至不接近），它看起来很丑，所以我必须使每列的宽度相等。表头中的一些文本由2或3个字组成，有些是单个字。表头文本转换

这是它的样子：http://img571.imageshack.us/img571/9527/tbl.png

所有我想要的，就是每列具有相同的宽度，无论是在报头名多久，名放是在2行最多。

编辑：例子：

.header { 


-webkit-transform: rotate(270deg); 
-moz-transform: rotate(270deg); 
-ms-transform: rotate(270deg); 
-o-transform: rotate(27deg); 
transform: rotate(270deg); 
white-space: pre-line; 
width: 50px; 
height: 180px; /* to be adjusted: column is not always tall enough for text */ 
margin: 0 -80px; 
vertical-align: middle;

}

来源

2013-01-11 Nutic

我不能帮你没有看到相关的代码。请提供所有HTML和CSS来展示问题，但没有任何不相关的内容。 – KatieK

你是否在头文件中定义了每个''的宽度和高度？ – Mooseman

添加本说明书中：

table { width: 100%; table-layout: fixed; }

执行此：

表和列的宽度是由表和col 元素的宽度，或通过细胞的第一行的宽度设定。中的单元格不会影响列宽。

，并且需要具有指定的宽度。有关更多信息，请参见https://developer.mozilla.org/en-US/docs/CSS/table-layout。

来源

2013-01-11 19:26:25 KatieK

-1

OK！我做了一个研究，似乎浏览器在转换后不会计算dimansions。

Rotate Text as Headers in a table (cross browser)

我觉得你有只有一个选项及其：JavaScript的;

找到自己一个很好的行高度并在页面加载后调整宽度。

来源

2013-01-11 18:30:48 Lupus

然后它覆盖另一个。不起作用。 – Nutic

一些代码会很有用 – Lupus

现在有代码和示例 – Nutic

这是最好的我走到这一步：

$(document).ready(function() { 

    (function() { 
    var maxW = 0, 
     maxH = 0; 

    $("td.header").each(function() { 

     $cell = $(this); 

     $dummyDiv = $("<div></div>", { 
     text: $cell.text() 
     }); 

     // Replaces the original text for a DummyDiv to figureout the cell size before the rotation 
     $cell.html($dummyDiv); 

     if ($cell.width() > maxW) maxW = $cell.width(); 
     if ($cell.height() > maxH) maxH = $cell.height(); 
    }); 

    $("td.header").each(function() { 
     // Applies the rotation and then the size previosly calculated 
     $(this) 
     .addClass("rotate") 
     .width(maxH + 10) 
     .height(maxW + 10); 
    }); 
    })(); 
});

你可以看到现场演示在这里：http://jsfiddle.net/Lrr3G/

我希望能帮助:)

来源

2013-01-11 23:31:45 cacoroto

表头文本转换

回答

相关问题