I need to achieve something like this with HTML table:
I have tried but if there is another/better solution please share:
https://jsfiddle.net/mso268dr/113/
It just adds 4 empty cells and ::before blocks in two of them. It uses transform rotate of 45 deg. of one border side of ::before.
table {
border: 2px solid red;
border-collapse: collapse;
box-sizing: border-box;
}
table th, table td {
background-color: #eff;
border: 1px solid gray;
padding: 0.2em 0.5em;
}
table th {
background-color: #a85;
color: #eee;
border: 1px solid #5f5;
}
.t {
position: relative;
border-bottom: none;
border-right: none;
}
.t + * {
border-left: none;
border-right: none;
}
.bs {
border-top: none;
border-right: none;
}
.bs + * {
border-left: none;
border-right: none;
}
.t::before, .b::before {
content: "";
height: 100%;
background-color: none;
border-left: 1px solid #5f5;
transform: rotate(-45deg);
transform-origin: bottom;
position: absolute;
left: 100%;
top: 0;
}
.b::before {
transform-origin: top;
left: -1px;
}
.b {
position: relative;
border-left: none;
border-top: none;
}
.te {
border-left: 0;
border-bottom: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table test</title>
</head>
<body>
<table>
<tr>
<th class="t"></th>
<th>TOP - Right label</th>
<th class="te"></th>
<th rowspan=2>some label</th>
</tr>
<tr>
<th class="bs"></th>
<th>BOTTOM label</th>
<th class="b"></th>
</tr>
<tr>
<td colspan=3>some text</td>
<td>some text</td>
</tr>
</table>
</body>
</html>if it could be done without additional empty cells only by ::before statements it would be a good improvement.
Thanks in advance!