Encountering some issues with a large table that I want to display differently, so I've opted for showing the table header vertically at a 45-degree angle. Everything works well when there are more registrations, but when performing a search that returns just one or two results, the table doesn't look as nice or user-friendly as in the provided image:
My question is how can I make the columns adjust dynamically instead of having a large left header and small right columns.
Here is a fiddle with my example :
HTML:
<table class="table table-striped table-header-rotated">
<thead>
<tr>
<!-- First column header remains unrotated -->
<th></th>
<!-- The following headers are rotated -->
<th class="rotate-45"><div><span>Column header 1</span></div></th>
<th class="rotate-45"><div><span>Column header 2</span></div></th>
<th class="rotate-45"><div><span>Column header 3</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<th class="row-header">Row header 1</th>
<td>33</td>
<td>978</td>
<td>57</td>
</tr>
<tr>
<th class="row-header">Row header 2</th>
<td>99</td>
<td>678</td>
<td>67</td>
</tr>
<tr>
<th class="row-header">Row header 3</th>
<td>332</td>
<td>701</td>
<td>877</td>
</tr>
</tbody>
</table>
CSS:
.table{width:93%;}
.table-header-rotated th.row-header{
width: auto ;
}
.table-header-rotated td{
width: 40px;
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
vertical-align: middle;
text-align: center;
}
.table-header-rotated th.rotate-45{
height: 80px;
position: relative;
vertical-align: bottom;
padding: 0;
font-size: 12px;
line-height: 0.8;
}
.table-header-rotated th.rotate-45 > div{
position: relative;
top: 0px;
left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the cell height and 45 is the rotation angle*/
height: 100%;
transform:skew(-45deg,0deg);
overflow: hidden;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-top: 1px solid #dddddd;
}
.table-header-rotated th.rotate-45 span {
transform:skew(45deg,0deg) rotate(315deg);
position: absolute;
bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
display: inline-block;
width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the cell height, 40 is the width of the cell, and 45 is the rotation angle*/
text-align: left;
}