How can I draw an html table with diagonal lines and diagonal text?
How can I draw a table like this using html5 and css3 any suggestion?
I tried this, I think it is too hard: Diagonal lines and diagonal texts
I am using css3 styles and svg html5 tag, Is there any other way I could make html table like this?
<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>
+3
source to share
1 answer
Basic building blocks:
-
Well marked
<table>
-
Skewed pseudo-element border to get basic shape
-
A span turn containing the heading text.
The concept is pretty simple, pseudo-elements and spacing are positioned with position: absolute
and they are positioned relative to their parent headers <th>
, which haveposition: relative
This is how it looks in Chrome / Firefox / IE10 +. IE 8-9 should work with its own filters.
Here's the HTML / CSS:
* {
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 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;
}
<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>
+9
source to share