【发布时间】：2018-11-18 16:43:46
【问题描述】：
我希望创建一个表格，其中线程被冻结并且主题中的标签以垂直方式定向。我的尝试如下，但是由于我对 css 非常陌生，因此此实现存在许多问题。
我不喜欢我的解决方案的一件事是，在您开始滚动表格之前，由于滚动条被隐藏，有更多行需要滚动到视图中并不明显。有没有办法让滚动条永久可见？
在上面的广告顶部还有一个大景观，其中显示了派对名称。我可以通过玩弄 th.vertical 中的值来扩大这个差距，但我无法消除它。如何强制标题仅与它包含的文本一样高？
最后，我希望thead 中的垂直文本相对于列值居中，但我还没有弄清楚如何做到这一点。我该怎么做？
我还希望能够对任何列进行排序。
table thead tr {
display: block;
}
table th,
table td {
width: 75px; //fixed width
}
div.vertical {
margin-left: -100px;
position: absolute;
width: 210px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
/* Safari/Chrome */
-moz-transform: rotate(-90deg);
/* Firefox */
-o-transform: rotate(-90deg);
/* Opera */
-ms-transform: rotate(-90deg);
/* IE 9 */
}
th.vertical {
height: 60px;
line-height: 14px;
padding-bottom: 100px;
text-align: left;
}
table tbody {
display: block;
height: 500px;
overflow: auto;
}<table class='vrt-header'>
<thead>
<tr>
<th></th>
<th class="vertical">
<div class="vertical">Republican</div>
</th>
<th class="vertical">
<div class="vertical">Democrat</div>
</th>
<th class="vertical">
<div class="vertical">Libertarian</div>
</th>
<th class="vertical">
<div class="vertical">Green</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Alabama
</td>
<td>
65
</td>
<td>
25
</td>
<td>
10
</td>
<td>
0
</td>
</tr>
<tr>
<td>
Alaska
</td>
<td>
75
</td>
<td>
15
</td>
<td>
10
</td>
<td>
0
</td>
</tr>
<tr>
<td>
Arizona
</td>
<td>
55
</td>
<td>
40
</td>
<td>
5
</td>
<td>
0
</td>
</tr>
<tr>
<td>
Arkansas
</td>
<td>
65
</td>
<td>
25
</td>
<td>
10
</td>
<td>
0
</td>
</tr>
<tr>
<td>
California
</td>
<td>
25
</td>
<td>
65
</td>
<td>
3
</td>
<td>
7
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
<tr>
<td>
?
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
</tbody>
</table>【问题讨论】：
-
您一共问了 4 个问题。尝试将它们分解为多个问题。它使回答更容易，并且其他人更有可能遇到相关问题。
-
不确定我是否完全理解了这个问题。 A）固定列的宽度使这更容易处理，这是你一直想要的吗？ B）您是否考虑过写作模式而不是 position+transform ？ C) 滚动条的宽度通常在 1.2rem 左右，填充在这里有帮助吗？ D) 如果 div 是 inline-block，那么 text-align 就可以了。这里有一个代码笔来测试这条评论：codepen.io/gc-nomade/pen/YvrMeN（灵感来自codepen.io/gc-nomade/pen/EKQKBe &）否则通过垂直边距/填充的特殊性在通量中旋转codepen.io/gc-nomade/pen/Cqkig
-
还有 position:sticky 看不看codepen.io/gc-nomade/pen/Lrzvox
标签： jquery css html html-table