Tabelle mit fester Kopfzeile und gedrehten Spaltenüberschriften
Ich habe eine Tabelle mit festem Kopf und fester erster Spalte. Ich möchte auch die Spaltenüberschriften um 45 Grad drehen.
Behobener Titel muss Hintergrundfarbe festlegen. Dies führt jedoch bei um 45 Grad gedrehten Titeln zu Problemen, da der Hintergrund der nächsten Spalte den Text der vorherigen Spalte überlappt. Hier sind Beispiele für Fragen:
.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>
Wenn ich die Hintergrundfarbe nicht einstelle, scrollen die Zeilen mit den Spaltenüberschriften:
.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>
Hat jemand eine Lösung, um (a) die Kopfzeile festzuhalten und keine Datenzeilen anzuzeigen, die dahinter nach oben scrollen, und (b) alle um 45 Grad gedrehten Kopfzeilen weiterhin korrekt anzuzeigen?
Vielen Dank im Voraus!
