如何在TH Table标记中使用CSS Rotate（）

我需要一些CSS专家的帮助

我正在尝试创建一个简单的html

，其中列标题（

标记）的文本旋转270度以横向显示

我在锚定标题单元格时遇到问题，因此单元格文本的最左侧部分单独与所有

标记的底部或基线对齐

我对此做了很多很多尝试，只是无法通过CSS解决它

有人能给我一些如何实现这一目标的想法吗

见我的朋友

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

  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}

我知道这不是最终结果，但我在旋转中加入了高度，并将跨度更改为显示：block、nowrap和right align。。。 我相信你会完成这件事；o）

在标头的点（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及以下版本，您必须使用而不是

旋转（270度）

。 因此，270度的相应旋转矩阵是

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

IE9问题和解决方法

---

在IE9中，您将在标题部分看到一个大的黑色矩形，导致此错误的原因是IE9同时识别

-ms transform

和

filter

。当两个CSS都存在时，浏览器只渲染一个黑色区域。为了解决这个问题，我建议您使用条件包含，以便IE9仅使用

-ms transform
。是的，我理解。但它不起作用。你能偷看我的jsfiddle@Vucko吗？@H.Ferrence查看我的最新答案以支持IE。是的，我昨天试过了，但它不起作用，所以我继续……我告诉我的客户不要使用IE8（我正在构建他们的私人应用程序）。谢谢@JoseRuiSantos解决方案的其余部分，因为这为我解决了问题！！