Question

我正在尝试创建一个带有列标题的HTML表格，但每个列标题都有一个冗长的标题。我想以对角线为每列制作标题。我想知道是否有css（或java，jquery，ect。）来实现这种效果，可以在所有浏览器（firefox，IE7＆amp; 8，等等）上运行，以及如何实现它。

以下是我想要创建的视觉示例。 table with diagonal title heads

我在stackexchange上找到了这个，我无法弄清楚如何充分利用它，或者确定它是否适用于我想要做的事情。

https://tex.stackexchange.com/questions/14288/how-combine-make-diagonal-column-heads-in-table-with-multicolumn-headers

Answer 1

将您想要的文字换成另一个元素，例如a <div>然后对该元素执行CSS transform;见MDN。

Answer 2

尝试

   .vertical
    {
    writing-mode:tb-lr;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:90px;
    height:120px;   
    position:relative;
    left:90px;
    top:80px;
}

请参阅Working DEMO

Reference

Answer 3

将CSS 3用于现代浏览器：

-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-o-transform:rotate(70deg);
-ms-transform:rotate(70deg);
transform(70deg);

并过滤IE（不幸的是我不确定它是否与IE6兼容以及它是如何工作的）：

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5);

MSDN来源：http://msdn.microsoft.com/en-us/library/ms532918(v=vs.85).aspx

如何在html表格上制作对角线标题

3 个答案: