粘性和旋转时样式化元素

Question

因此，使表中的标题元素具有粘性并旋转它们很容易。

将它们一起使用时遇到困难。旋转时，页眉元素由于粘性而被切除。

这是一个快速的代码框。 tbody是可滚动的，您可以看到由于旋转的实现而将thethe th元素切除的地方。

https://codesandbox.io/s/l7wo82p82q

我整天都在动脑筋，尝试了不同的方法，但似乎没有任何效果！我只想要一个旋转的元素，不要在粘性的主题中剪掉。

任何帮助或见识将不胜感激。

**已更新：https://codesandbox.io/s/2o4l1vz57n

更新了codesandbox，使我更努力地寻找解决方案。列的数量是动态的，标题是各种长度的。正文中的每个单元格（在前两列之后）都是一个点，以指示它是否是标题的一部分。**

Answer 1

可能是因为您尚未设置表格的宽度。

设置

table {
    width:100%; //table width
    table-layout: fixed;
}

以下是更改后的屏幕截图：

Answer 2

尝试：

awk -F, 'NR==FNR{a[$2 $3]=substr($0,length($1 FS)+1);next} $1 in a{print a[$1],$NF;next} {$1=substr($1,1,5) OFS substr($1,6,5);} 1' OFS=, file1 FS=' ' file2

Answer 3

这里的所有其他答案都将列号折叠到下一行，但是似乎您希望将所有内容都保留在一行中。如果您不介意更自然的列宽，请更改transform-origin并删除width和z-index：

th > div {
  transform: translate(25px, 51px) rotate(315deg);
  transform-origin: bottom left;
  /* z-index: 999 */
  /* width: 30px; */
}

Answer 4

使用300deg和0px调整屏幕大小时，您也不会遇到问题

th > div {
  transform: translate(0px, 51px) rotate(300deg);
  width: 30px;
}

Answer 5

th.rotate > div {
transform: translate(2px, 5px) rotate(318deg);
/* width: 30px; */

}

将此添加到您的CSS文件中。希望这是您想要的