为了节省屏幕空间,我正在尝试将表头单元格(th)变成一条垂直的文本线。我已经向标题单元格添加了.vertical-text {transform: rotate(-90deg); white-space: nowrap;} 来实现这一点,但它会产生一些奇怪的效果。
问题:
1)文本不直接位于其列上方,而是偏向一侧,难以确定每个标题所属的列。
2)表头单元格的高度不会因为旋转后的文本增加而增高,会被裁剪掉。我需要表头行来拉伸以适应文本的新高度。
3)在使文本垂直后,列的宽度没有收缩,它们保持与文本不垂直时的宽度相同。使标题单元格变为垂直是为了节省空间,但我这样做并没有调整列宽度。
问题:
1)文本不直接位于其列上方,而是偏向一侧,难以确定每个标题所属的列。
2)表头单元格的高度不会因为旋转后的文本增加而增高,会被裁剪掉。我需要表头行来拉伸以适应文本的新高度。
3)在使文本垂直后,列的宽度没有收缩,它们保持与文本不垂直时的宽度相同。使标题单元格变为垂直是为了节省空间,但我这样做并没有调整列宽度。
.container {
width: 80%;
margin: 0 auto;
display: flex;
align-items: center;
flex-direction: column;
}
.vertical-text {
transform: rotate(-90deg);
white-space: nowrap;
}
table {
border-collapse: collapse;
background: white;
border-radius: 10px;
overflow: hidden;
min-width: 100%;
position: relative;
margin: 0 -20px;
}
table * {
position: relative;
}
table td,
table th {
padding-left: 8px;
}
table thead tr {
background: #36304a;
}
table tbody tr {
height: 50px;
}
table tbody tr:last-child {
border: 0;
}
table td,
table th {
text-align: left;
}
table td.l,
table th.l {
text-align: right;
}
table td.c,
table th.c {
text-align: center;
}
table td.r,
table th.r {
text-align: center;
}
.header th {
font-size: 18px;
color: #fff;
line-height: 1.2;
font-weight: unset;
}
tbody tr:nth-child(even) {
background-color: #f5f5f5;
}
tbody tr {
font-size: 15px;
color: #808080;
line-height: 1.2;
font-weight: unset;
}
tbody tr:hover {
color: #555555;
background-color: #f5f5f5;
cursor: pointer;
}
.column {
width: 160px;
}
.column:first-child {
padding-left: 40px;
}
.column:last-child {
padding-right: 40px;
}
<div class="container">
<table>
<thead>
<tr class="header">
<th class="column vertical-text"></th>
<th class="column vertical-text">Remove Apps</th>
<th class="column vertical-text">Restrict App Access</th>
<th class="column vertical-text">Block Tracking</th>
<th class="column vertical-text">Disable Ads</th>
<th class="column vertical-text">Disable Scheduler</th>
<th class="column vertical-text">Backup</th>
<th class="column vertical-text">Restore</th>
<th class="column vertical-text">Misc</th>
<th class="column vertical-text">Last Updated</th>
</tr>
</thead>
<tbody>
<tr>
<td class="column">Some Name Here</td>
<td class="column" data-title="Points">No</td>
<td class="column" data-title="Points">Yes</td>
<td class="column" data-title="Points">Yes</td>
<td class="column" data-title="Points">No</td>
<td class="column" data-title="Points">Yes</td>
<td class="column" data-title="Points">Yes</td>
<td class="column" data-title="Points">No</td>
<td class="column" data-title="Points">No</td>
<td class="column" data-title="Points">Yes</td>
</tr>
<tr>
<td class="column">Some Name Here</td>
<td class="column" data-title="Points">No</td>
<td class="column" data-title="Points">Yes</td>
<td class="column" data-title="Points">Yes</td>
<td class="column" data-title="Points">No</td>
<td class="column" data-title="Points">Yes</td>
<td class="column" data-title="Points">Yes</td>
<td class="column" data-title="Points">No</td>
<td class="column" data-title="Points">No</td>
<td class="column" data-title="Points">Yes</td>
</tr>
<tr>
<td class="column">Some Name Here</td>
<td class="column" data-title="Points">No</td>
<td class="column" data-title="Points">Yes</td>
<td class="column" data-title="Points">Yes</td>
<td class="column" data-title="Points">No</td>
<td class="column" data-title="Points">Yes</td>
<td class="column" data-title="Points">Yes</td>
<td class="column" data-title="Points">No</td>
<td class="column" data-title="Points">No</td>
<td class="column" data-title="Points">Yes</td>
</tr>
</tbody>
</table>
</div>
th
元素不会限制其自身宽度以适应旋转文本的宽度。请查看以下示例,了解如何获得您要查找的结果:https://css-tricks.com/rotated-table-column-headers/ - benvc