Table with fixed header and rotated column headers
I have a table with a fixed header and a fixed first column. I also want to rotate the column headers 45 degrees.
Fixed title needs to set background color. However, this causes problems with 45-degree rotated titles because the background of the next column overlaps the text of the previous column. Here are examples of questions:
.fixed_table {
white-space: nowrap;
margin: 0;
border: none;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.fixed_table td,
.fixed_table th {
padding: 5px;
}
.fixed_table thead th {
padding: 5px;
position: sticky;
top: 0;
z-index: 1;
width: 25vw;
background: #F8F9FA;
}
.fixed_table td {
background: #F8F9FA;
padding: 5px;
text-align: center;
border: 1px solid #ccc;
}
.fixed_table tbody th {
text-align: left;
position: relative;
}
.fixed_table thead th:first-child {
position: sticky;
left: 0;
z-index: 2;
}
.fixed_table tbody th {
position: sticky;
left: 0;
background: #F8F9FA;
z-index: 1;
}
th.rotate {
/* Something you can count on */
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform:
/* Magic Numbers */
translate(25px, 51px)
/* 45 is really 360 - 45 */
rotate(315deg);
width: 30px;
}
th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
<div style="height: 100%; width: 100%; overflow-y: scroll; background-color: #F8F9FA; height: 400px;">
<table class="fixed_table">
<thead>
<tr>
<th></th>
<th class="rotate"><div><span>Activity 1</span></div></th>
<th class="rotate"><div><span>Activity 2</span></div></span></div></th>
<th class="rotate"><div><span>Activity 3</span></div></th>
<th class="rotate"><div><span>Activity 4</span></div></th>
<th class="rotate"><div><span>Activity 5</span></div></th>
<th class="rotate"><div><span>Activity 6</span></div></th>
<th class="rotate"><div><span>Activity 7</span></div></th>
<th class="rotate"><div><span>Activity 8</span></div></th>
<th class="rotate"><div><span>Activity 9</span></div></th>
<th class="rotate"><div><span>Activity 10</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<th>Employee 1</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 2</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 3</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 4</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 5</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 6</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 7</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 8</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 9</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 10</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 11</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 12</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 13</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 14</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 15</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
</tbody>
</table>
</div>
If I don't set the background color, the rows scroll with the column headers:
.fixed_table {
white-space: nowrap;
margin: 0;
border: none;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.fixed_table td,
.fixed_table th {
padding: 5px;
}
.fixed_table thead th {
padding: 5px;
position: sticky;
top: 0;
z-index: 1;
width: 25vw;
background: transparent;
}
.fixed_table td {
background: #F8F9FA;
padding: 5px;
text-align: center;
border: 1px solid #ccc;
}
.fixed_table tbody th {
text-align: left;
position: relative;
}
.fixed_table thead th:first-child {
position: sticky;
left: 0;
z-index: 2;
}
.fixed_table tbody th {
position: sticky;
left: 0;
background: #F8F9FA;
z-index: 1;
}
th.rotate {
/* Something you can count on */
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform:
/* Magic Numbers */
translate(25px, 51px)
/* 45 is really 360 - 45 */
rotate(315deg);
width: 30px;
}
th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
<div style="height: 100%; width: 100%; overflow-y: scroll; background-color: #F8F9FA; height: 400px;">
<table class="fixed_table">
<thead>
<tr>
<th></th>
<th class="rotate"><div><span>Activity 1</span></div></th>
<th class="rotate"><div><span>Activity 2</span></div></span></div></th>
<th class="rotate"><div><span>Activity 3</span></div></th>
<th class="rotate"><div><span>Activity 4</span></div></th>
<th class="rotate"><div><span>Activity 5</span></div></th>
<th class="rotate"><div><span>Activity 6</span></div></th>
<th class="rotate"><div><span>Activity 7</span></div></th>
<th class="rotate"><div><span>Activity 8</span></div></th>
<th class="rotate"><div><span>Activity 9</span></div></th>
<th class="rotate"><div><span>Activity 10</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<th>Employee 1</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 2</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 3</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 4</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 5</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 6</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 7</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 8</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 9</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 10</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 11</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 12</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 13</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 14</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 15</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
</tbody>
</table>
</div>
Does anyone have a solution to (a) keep the header fixed and not display rows of data that scroll up behind it, and (b) have all 45 degree rotated headers still display correctly?
Thanks in advance!
