表头组在打印中无法使用 css 转换

Question

我正在尝试打印一个超过 10 列的表格。所以我试图设法将表格的标题旋转到垂直位置。现在我必须打印此表，并且我想在所有页面中旋转标题。当我打印第一页的表格时，我可以看到垂直标题，但它后面没有其他页面(只有第一页是呈现表格标题(。

我在jsfiddle上创建了一个示例

th.rotate {
/* Something you can count on */
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform: 
/* Magic Numbers */
translate(25px, 51px);
/* 45 is really 360 - 45 */
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform:rotate(-90deg);
width: 40px;
}
th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}

有人可以帮助我缺少什么吗？

示例代码

谢谢大家

Answer 1

因为它需要重复自己生成标头，因此请将它们添加到您的 css 中。

PS：如果你在chrome打印，它不会有任何效果，因为chrome不支持这个

thead {display: table-header-group;}
tfoot {display: table-header-group;}

Answer 2

最后我得到了一个在 chrome 中工作的 css。

.vertical {
white-space: nowrap;
-ms-writing-mode: tb-rl;
-moz-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
<th ><div><span class="vertical">Column header</span></div><th>