如何绘制带有对角线和对角线文本的html表格？

我如何使用html5和css3绘制这种表格？有什么建议吗

我试过这个我觉得太复杂了

我正在使用css3样式和svg html5标记， 有没有其他方法可以制作这种html表格

<div style='width: 300px; height: 100px; display: flex; flex-direction: row-reverse;'>
<div style='width: 100px; height: 100px; border-top: 2px solid rgb(255,0,0); position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
    <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
    <div style='margin-left:-40px; margin-top:25px; width: 80px; height: 30px; font-size:19px; background-color: yellow; -ms-transform: rotate(315deg); /* IE 9 */
    -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
    transform: rotate(315deg);'>DATO3</div>
</div>
<div style='width: 100px; height: 100px; border-top: 2px solid rgb(255,0,0); position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
    <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
    <div style='margin-left:-45px; margin-top:25px; width: 80px; height: 30px; font-size:19px; background-color: yellow; -ms-transform: rotate(315deg); /* IE 9 */
    -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
    transform: rotate(315deg);'>DATO2</div>
</div>
    <div style='width: 100px; height: 100px; border: 0px solid black; position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
    <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
    <div style='margin-left:-40px; margin-top:25px; width: 80px; height: 30px; background-color: white; -ms-transform: rotate(315deg); /* IE 9 */
    -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
    transform: rotate(315deg);'></div>
</div>
    </div>
<div style='width: 300px; height: 100px; display: flex; flex-direction: row-reverse;'>
<div style='width: 100px; height: 100px; border-top: 0px solid black; position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
    <line x1="0" y1="100%" x2="0%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:3"/>
</svg>
</div>
    <div style='width: 100px; height: 100px; border-top: 2px solid rgb(255,0,0); position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
    <line x1="0" y1="100%" x2="0%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:3"/>
</svg>
</div>
<div style='width: 100px; height: 100px; border-top: 2px solid rgb(255,0,0); position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
    <line x1="0" y1="100%" x2="0%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:3"/>
</svg>
</div>
</div>

DATO3
DATO2

主要构建模块包括：

• 标记得很好的

• 一个带有倾斜的伪元素边界，以获得基本形状

• 在包含标题文本的范围上旋转

这个概念非常基本，伪元素和跨距是使用

位置：绝对

定位的，它们是相对于其父

标题定位的，这些标题具有

位置：相对

以下是Chrome/Firefox/IE10+中的外观。IE8-9应该与他们的专有过滤器一起工作

以下是HTML/CSS：

*{
保证金：0；
填充：0；
}
身体{
背景：#FFF；
}
桌子{
边界塌陷：塌陷；
利润率：50像素0.50像素；
边框顶部：实心1px#000；
位置：相对位置；
}
/*最高边界*/
表：之前{
内容：''；
显示：块；
位置：绝对位置；
顶部：-20px；
左：120px；
高度：20px；
宽度：240px；
边框：实心1px#000；
边框底部：无；
}
/*最右侧页眉上边框（在表外）*/
表：之后{
内容：''；
显示：块；
位置：绝对位置；
边框顶部：实心1px#000；
宽度：101px；
右：-101px；
排名：0；
}
/* 
-应用标题背景/字体颜色
-为IE 9-10设置基准z指数
*/
西亚特：以前{
背景#03a9f4；
颜色：#FFF；
z指数：1；
}
/*“最小宽度”和“最大宽度”一起起到宽度的作用*/
th{
最小宽度：60px；
最大宽度：60px；
位置：相对位置；
高度：100px；
}
/*伪元素边界*/
th:以前{
内容：''；
显示：块；
位置：绝对位置；
排名：0；
右：-50px；
高度：100px；
宽度：60px；
边框：实心1px#000；
边界权：无；
边界顶部：无；
变换：倾斜（-45度）；
边框底部：无；
}
/*仅将右边框应用于最后一个伪元素*/
泰德：最后一个孩子：之前{
右边框：实心1px#000；
}
/*仅将上边框应用于第一行单元格*/
tbody tr：第一个孩子td{
边框顶部：实心1px#000；
}
/* 
-旋转和定位标题
-填充使文本垂直居中，并完成高度的工作
-z索引确保文本显示在IE 9-10中的背景色上
*/
第四跨{
变换：旋转（-45度）；
显示：内联块；
垂直对齐：中间对齐；
位置：绝对位置；
右：-70px；
底部：29px；
身高：0；
填充：0.75em 0.85em；
宽度：100px；
z指数：2；
}
/*创建前两种样式*/
第n个孩子（1），第n个孩子（2）{
边框：实心1px#000；
边界顶部：无；
边框底部：无；
}
第：第n个孩子（2）{
边界权：无；
}
第n个孩子（1）：之前，第n个孩子（2）：之前{
显示：无；
}
运输署{
边框：实心1px#000；
边框底部：无；
边界顶部：无；
高度：20px；
文本对齐：居中；
}
t脚掌{
边框：实心1px#000；
}

一个
两个
三
四
五
六
七
0
0
0
0
0
0
0
0
0
0
0
0
0
0

你可以使用一个实际的

…我怎样才能在一个？你有一个例子吗？这对我来说是怎样的，非常感谢。这种css样式适用于IE9或更高版本，不是吗？谢谢，这是我需要的答案。是的，我在上进行了测试，我将尝试使用IE过滤器。@EduardoUstarez-请查看我的更新答案，它包含许多改进，并适用于跨浏览器IE10+/Firefox/Chrome。到目前为止，我对结果很满意：）是的，我做了测试。我感谢你的反馈。非常感谢。@EduardoUstarez-我刚刚测试过（以前在手机上）。只需在表的底部使用

th:nth child（3）：before，th:nth child（5）：before{background:#000；}

。