Question

我需要一些CSS大师帮助。

我正在尝试创建一个简单的html <table>，其中列标题（<th>标记）的文字旋转270度以显示在侧面。

我无法锚定标题单元格，因此单元格文本的最左侧部分单独对齐所有<th>标记的底部或基线。

我做了很多次尝试，并且无法通过CSS解决它。

有谁可以就如何实现这一点给我一些想法？

在http://jsfiddle.net/franco13/t5GgE/

查看我的jsfiddle

这就是我想要实现的目标：

enter image description here

Answer 1

http://jsfiddle.net/t5GgE/1/

在标题的点（65,60）上指定转换原点，不允许换行，并使td居中对齐。

th.rotate {
    white-space: nowrap;
    -webkit-transform-origin: 65px 60px;
    -moz-transform-origin: 65px 60px;
    -o-transform-origin: 65px 60px;
    -ms-transform-origin: 65px 60px;
    transform-origin: 65px 60px;
}

td.rights {
    text-align: center;
}

更新IE8及以下

对于IE8及以下版本，您被迫使用Transformation matrices而不是rotate(270deg)。因此，270deg的对应旋转矩阵为[0, 1, -1, 0]。

您需要做的是添加以下内容，并且应该适用于IE8及以下版本：

th.rotate span {
    /* rotated text in IE renders very bad (unless you use clear type), so that even by making it normal, looks less bold but still bold */
    font-weight: normal\9; /* \9 is an hack for IE8 and below */
    letter-spacing: 3px\9; /* because is so bold, need to give letters some space to breath */

    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod = "auto expand");
    width: 150px\9;
    height: 150px\9;
    margin-right: -130px\9;
}

<强> Final jsFiddle version

IE9问题和解决方法 在IE9中，您会在标题部分看到一个大的黑色矩形，这个错误的原因是IE9识别-ms-transform和filter。当两个CSS都存在时，浏览器只是呈现黑色区域。为了解决这个问题，我建议您使用IE9的条件包含仅使用-ms-transform。

Answer 2

  table {
    margin-bottom: 20px; border: solid 1px red
  }
  tr#groups {
    /*display:block;
    margin-left:120px;
    margin-top:120px;*/
  }

  th.rotate {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    /*display:inline-block;*/
    height:30em;
    /*float:left;*/
    /*width:30px;*/
  }
  span.intact {
      display: block;
      white-space:nowrap;
    text-align:right
  }
  td.menuItems {
    width: 240px;
  }
  td.no-indent {
    font-weight: bold;
  }
  td.indent {
    padding-left:12px;
  }
  td.rights {
    width:20px;
  }
  td,th { border: solid 1px red}

我知道这不是最终的，但我在th.rotate中设置了高度并更改了span来显示：block，nowrap和right align ... 我相信你会完成这个; o）

如何在表格标签中使用CSS Rotate（）

2 个答案: