Is there a way to create slanted or rotated table headers in HTML? How can I ensure that the slanted inner-side header border aligns perfectly with the vertical border of the table cell element?
Here is an example of the HTML code:
<table>
<tr>
<th class="rotate"><div><span>Column1</span></div></th>
<th class="rotate"><div><span>Column2</span></div></th>
<th class="rotate"><div><span>Column3</span></div></th>
<th class="rotate"><div><span>Column4</span></div></th>
</tr>
<tr>
<td>RowDisplay1000</td>
<td>Row12</td>
<td>Row13</td>
<td>Row14</td>
</tr>
<tr>
<td>RowDisplay2000</td>
<td>Row22</td>
<td>Row23</td>
<td>Row24</td>
</tr>
</table>
And this is the corresponding CSS:
th.rotate {
/* Custom styling */
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform:
translate(25px, 51px)
rotate(315deg);
width: 30px;
}
th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 7px 10px;
}
table {
border-collapse: collapse;
width:100%;
}
table td
{
border: 1px solid #ccc;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
Example link: http://jsfiddle.net/Verdeairo/gwnx03vg/