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

Question

我正在尝试创建一个带有列标题的 HTML 表格，但每个列标题都有一个很长的标题。我想以对角线角度为每列制作标题。我想知道是否有 css（或 java、jquery 等）来实现这种适用于所有浏览器（firefox、IE7 &8 等）的效果以及如何实现它。

这是我想要创建的视觉示例。带有对角标题的表格

我在 stackexchange 上找到了这个，但我不知道如何充分利用它，或者确定它是否适用于我想做的事情。

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

Answer 1

将您想要对角线的文本包裹在另一个元素中，例如 a<div>然后transform在该元素上执行 CSS；见MDN。

Answer 2

在现代浏览器中使用 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

Answer 3

尝试

   .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

参考