3

我需要一些 CSS 大师的帮助。

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

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

我已经做了很多很多尝试，但无法通过 CSS 解决它。

谁能给我一些关于如何实现这一目标的想法？

在http://jsfiddle.net/franco13/t5GgE/上查看我的 jsfiddle

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

在此处输入图像描述

4

2 回答 2

5

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

Specify a transformation origin on point (65, 60) for the headers, with no wrap allowed and make your td centered aligned.

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

Update for IE8 and below

For IE8 and below you are forced to use Transformation matrices instead of rotate(270deg). So, the correspondent rotation matrix for 270deg is [0, 1, -1, 0].

What you need to do, is add the following and should work just fine for IE8 and below:

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 problem and workaround In IE9, you will see a big black rectangle in the header section, and the reason to this bug is that IE9 recognizes both -ms-transform and filter. When both CSS are present, the browser simply renders a black area. To workaround this, I sugest you use conditional includes for IE9 to use -ms-transform only.

于 2013-02-21T13:07:34.983 回答
0 
  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 中并将跨度更改为显示：块、nowrap 和右对齐......我相信你会完成这个；o）

于 2013-02-21T13:05:32.293 回答