表头文本转换

Question

我已经使用了transform:rotate(270deg)作为表头,但由于该头中的名称不相等(甚至不接近),它看起来很难看,所以我必须使每一列的宽度相等.表头中的一些文本用2或3个单词组成,有些是单个单词.

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

我想要的是,每个列都有相同的宽度,无论标题中的名称有多长,并且名称最多为2行.

编辑:示例:

http://jsfiddle.net/SvAk8/

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

}

Answer 1

添加此规范：

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

table-layout: fixed;做这个：

表和列的宽度由表和 col 元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽。

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