Question

我已经使用了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;

}

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

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

Rotate Text as Headers in a table (cross browser)

我认为你只有一个选项：javascript;

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

表头文本转换

3 个答案: