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 和 col 元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽。

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

Answer 2

这是迄今为止我得到的最好的：

$(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/

我希望能有所帮助:)

Answer 3

好的！我做了一个研究，似乎浏览器在转换后不会计算维度。

将文本旋转为表格中的标题（跨浏览器）

我认为您只有一个选择，它是：javascript；

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