具有固定標題和旋轉列標題的表格
我有一個固定標題和固定第一列的表格。 我還想將列標題旋轉 45 度。
固定標題需要設定背景顏色。但是，這會導致 45 度旋轉標題出現問題，因為下一欄的背景與前一欄的文字重疊。以下是問題的範例：
.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>
如果我不設定背景顏色，行會捲動列標題：
.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>
是否有人有解決方案來 (a) 保持標題固定並且不顯示在其後面向上滾動的行數據，以及 (b) 讓所有 45 度旋轉的標題仍然正確顯示？
提前致謝！
