jquery - HTML 中的水平表和对角表

Question

可以用 HTML/CSS/Javascript 实现对角表列/单元格吗？

我已经用谷歌搜索了几个小时，我能找到的唯一资源是对角分割单元格，而不是旋转表格/列的一部分。

截屏：

Answer 1

就像@JakeGould 写的那样，您想使用Div或更好的Ul标签。至于转弯，使用 CSS3 旋转完成的桌子：

transform:rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
-moz-transform:rotate(-45deg); /* Firefox */
-webkit-transform:rotate(-45deg); /* Safari and Chrome */
-o-transform:rotate(-45deg); /* Opera */

所以基本上你的表格是由两张桌子组成的，一张是普通的，另一张是使用 CSS3 旋转的。

Answer 2

至少可以说这似乎很复杂。我不会尝试使用任何<table>标签来执行此操作，而是使用<div>, <ul>&<li>标签。但我相信现代 CSS 选项是可行的。

Answer 3

您在这里有 2 张桌子。旋转平方英尺。表，位于部门表后面。之后，您将一些内容旋转回初始位置。没有背景颜色的数字可以是表的一部分，重置它们上的 bg 颜色或单独的表，如列表，旋转并位于桌子附近。玩得开心！