如何用对角线和对角线文字绘制一个html表格？

Question

如何使用html5和css3绘制这种表格的任何建议？

我试过这个，我觉得这太复杂了：Diagonal Lines and Diagonal Texts

我正在使用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>

Answer 1

主要构建块是：

• 标记清晰<table>

• 具有倾斜的伪元素边框以获得基本形状

• 旋转包含标题文字的范围。

这个概念非常基本，伪元素和跨度使用position: absolute定位，并且它们相对于具有<th>

的父position: relative标题定位

Here is the example!

以下是Chrome / Firefox / IE10 +中的内容。 IE 8 - 9应该使用他们的专有过滤器。

这是HTML / CSS：

＆＃13;

＆＃13;

* {
    margin: 0;
    padding: 0;
}

body {
    background: #FFF;
}
table {
    border-collapse: collapse;
    margin: 50px 0 0 50px;
    border-top: solid 1px #000;
    position: relative;
}

/* Very top border */
 table:before {
    content:'';
    display: block;
    position: absolute;
    top: -20px;
    left: 120px;
    height: 20px;
    width: 240px;
    border: solid 1px #000;
    border-bottom: none;
}

/* Far right headers top border (it's outside the table) */
 table:after {
    content:'';
    display: block;
    position: absolute;
    border-top: solid 1px #000;
    width: 101px;
    right: -101px;
    top: 0;
}

/* 
     - Apply header background/font colour 
     - Set base z-index for IE 9 - 10
*/
 thead, th:before {
    background: #03a9f4;
    color: #FFF;
    z-index: 1;
}

/* min-width and max-width together act like a width */
 th {
    min-width: 60px;
    max-width: 60px;
    position: relative;
    height: 100px;
}

/* Pseudo element borders */
 th:before {
    content:'';
    display: block;
    position: absolute;
    top: 0;
    right: -50px;
    height: 100px;
    width: 60px;
    border: solid 1px #000;
    border-right: none;
    border-top: none;
    transform: skew(-45deg);
    border-bottom: none;
}

/* Apply the right border only to the last pseudo element */
 thead th:last-child:before {
    border-right: solid 1px #000;
}

/* Apply the top border only to the first rows cells */
 tbody tr:first-child td {
    border-top: solid 1px #000;
}

/* 
     - Rotate and position headings
     - Padding centers the text vertically and does the job of height
     - z-index ensures that the text appears over the background color in IE 9 - 10
*/
 th span {
    transform: rotate(-45deg);
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: -70px;
    bottom: 29px;
    height: 0;
    padding: 0.75em 0 1.85em;
    width: 100px;
    z-index: 2;
}

/* Create first two th styles */
 th:nth-child(1), th:nth-child(2) {
    border: solid 1px #000;
    border-top: none;
    border-bottom: none;
}
th:nth-child(2) {
    border-right: none;
}
th:nth-child(1):before, th:nth-child(2):before {
    display: none;
}

td {
    border: solid 1px #000;
    border-bottom: none;
    border-top: none;
    height: 20px;
    text-align: center;
}
tfoot {
    border: solid 1px #000;
}

＆＃13;

<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th><span>Three</span></th>
            <th><span>Four</span></th>
            <th><span>Five</span></th>
            <th><span>Six</span></th>
            <th><span>Seven</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </tfoot>
</table>

＆＃13;

＆＃13;

＆＃13;