javascript - 表格标题文本转换

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; 这样做:

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

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