我希望创建一个表格，其中线程被冻结，并且thead中的标签以垂直方式定向。我的尝试如下，但是由于我对css很新，所以这个实现存在许多问题。
关于我的解决方案，我不喜欢的一件事是，在您开始滚动表格之前，滚动条被隐藏，因此有多行要滚动到视图中并不明显。有没有办法让滚动条永久可见？
在上面的thead顶部还有一个大型景观，其中显示了聚会名称。我可以通过使用th.vertical中的值来扩大这个差距，但我无法消除它。如何强制thead仅与其包含的文本一样高？
最后，我希望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>
答案 0 :(得分：4)
我玩过你的代码......
overflow-y: scroll;。transform之后的高度。我使用了固定值。...另外，我补充道：
:hover上的某些样式以突出显示th上的操作。:nth-of-type()选择器替换行的颜色。...我最终得到了这个片段：
// Doc here: https://joequery.github.io/Stupid-Table-Plugin/
$("#simpleTable").stupidtable();table thead,
table tbody {
display: block;
}
table tbody {
height: 500px;
overflow-y: scroll; /* To make the scroll bar always visible */
}
thead th {
position: relative;
cursor: pointer; /* change cursor to show we can do an action */
height: 90px;
background: #ccc;
border-bottom: 2px solid black;
}
thead th:hover {
background: #ccf; /* Styling on hover */
}
thead th p {
position: absolute;
bottom: 20px;
transform: rotate(-90deg);
text-align: left;
}
table th,
table th p,
table td {
width: 75px;
}
table td {
text-align: center;
}
table tr td:first-of-type {
text-align: left;
}
table tr:nth-of-type(odd) td {
background: #eee;
}
table tr:nth-of-type(even) td {
background: #ddd;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>
<table id="simpleTable" class='vrt-header'>
<thead>
<tr>
<th data-sort="string"></th>
<th data-sort="int">
<p>Republican</p>
</th>
<th data-sort="int">
<p>Democrat</p>
</th>
<th data-sort="int">
<p>Libertarian</p>
</th>
<th data-sort="int">
<p>Green</p>
</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>
希望它有所帮助。
答案 1 :(得分：2)
1）这可能是在mac上，默认情况下使用覆盖滚动条。 Chrome和Safari支持webkit-scroll属性，可让您始终可见，但不确定是否可以在Firefox中覆盖它。
2）您可能会遇到UA style sheet的th条目：td, th { padding: 1px; }您可以使用th { padding: 0px; }
3）你想要的实际上是表的默认行为。但它有两个原因并不起作用。如果不使用现成的组件，这可能是您自己最难解决的问题。因此，除非你做这个练习，否则我建议你不要试图重新发明轮子。相反，找到一个jquery插件或角度组件或提供此功能的东西。我不认为可以以跨浏览器兼容的方式完成所有这些（包括旋转标题），而无需编写一堆javascript。
第一个原因是设置div.vertical { position:absolute }会使它们脱离正常流程; th将其正常流动的孩子定位为与整列相对应，但不是position:absolute。{/ p>
其次，由于tr { display:block }和允许滚动的tbody {display:block}，您巧妙地创建了3个表。布局代码（大约）将它们视为常规<div>，因此请查看<table><thead><div>...</div></thead><div>....</div></table>并创建表格单元格，行和部分（也称为tbody）来保存每个<div>。然后在div内部看到tr，然后创建一个table来保存它们。
因此，表格中位于thead > tr下的列与保存数据的列不同。因此，即使您解决了第一个原因，您仍然会与此竞争。
这是chrome的布局树（忽略十六进制）：
LayoutBlockFlow 0x23e069224010 HTML
LayoutBlockFlow 0x23e069224138 BODY
LayoutTable 0x23e069230010 TABLE class="vrt-header"
LayoutTableSection 0x23e069240010 THEAD
LayoutTableRow (anonymous) 0x23e06924c010
LayoutTableCell (anonymous) 0x23e069254010
LayoutBlockFlow 0x23e069224260 TR
LayoutTable (anonymous) 0x23e0692301b0
LayoutTableSection (anonymous) 0x23e069240188
LayoutTableRow (anonymous) 0x23e06924c128
LayoutTableCell 0x23e069254150 TH
LayoutTableCell 0x23e069254290 TH class="vertical"
LayoutBlockFlow (positioned) 0x23e069224388 DIV class="vertical"
LayoutText 0x23e069264010 #text "Republican"
LayoutTableCell 0x23e0692543d0 TH class="vertical"
LayoutBlockFlow (positioned) 0x23e0692244b0 DIV class="vertical"
LayoutText 0x23e0692640e0 #text "Democrat"
LayoutTableCell 0x23e069254510 TH class="vertical"
LayoutBlockFlow (positioned) 0x23e0692245d8 DIV class="vertical"
LayoutText 0x23e0692641b0 #text "Libertarian"
LayoutTableCell 0x23e069254650 TH class="vertical"
LayoutBlockFlow (positioned) 0x23e069224700 DIV class="vertical"
LayoutText 0x23e069264280 #text "Green"
LayoutTableSection (anonymous) 0x23e069240300
LayoutTableRow (anonymous) 0x23e06924c240
LayoutTableCell (anonymous) 0x23e069254790
LayoutBlockFlow 0x23e069224828 TBODY
LayoutTable (anonymous) 0x23e069230350
LayoutTableSection (anonymous) 0x23e069240478
LayoutTableRow 0x23e06924c358 TR
LayoutTableCell 0x23e0692548d0 TD
LayoutText 0x23e069264350 #text "\nAlabama\n"
LayoutTableCell 0x23e069254a10 TD
LayoutText 0x23e069264420 #text "\n65\n"
LayoutTableCell 0x23e069254b50 TD
LayoutText 0x23e0692644f0 #text "\n25\n"
LayoutTableCell 0x23e069254c90 TD
LayoutText 0x23e0692645c0 #text "\n10\n"
LayoutTableCell 0x23e069254dd0 TD
LayoutText 0x23e069264690 #text "\n0\n"
LayoutTableRow 0x23e06924c470 TR
LayoutTableCell 0x23e069254f10 TD
LayoutText 0x23e069264760 #text "\nAlaska\n"
答案 2 :(得分：0)
我做了你要求的一切，这里全部4个，几乎只用css。
我还可以用CSS代码编写第三个问题！我使用padding和div包装器来设置高度。像这样：
th.vertical {
height: 0;
vertical-align: bottom;
text-align: left;
cursor: pointer;
}
div.verticalWrapper {
height: 0;
padding-top: 100%;
position: relative;
}
请注意padding-top: 100%
1）我为这个创建了一个表容器div。
.tableContainer {
height: 400px;
width: 500px;
overflow: scroll;
}
对于iOS，这只是一个偏好问题：https://heresthethingblog.com/2015/03/10/mac-tip-macs-scroll-bars/
2）因为我们正在旋转元素，所以我们需要一个等于宽度的高度。我用css做了这个，你可以阅读相关的答案here
3）我使用了css转换。
4）使用与@takit-isy
相同的方法答案 3 :(得分：0)
您要完成的任务并不容易。我会用div取代您的表格。
我写了一个示例，因此您对它的外观有所了解：
<div class='table'>
<div class='header'>
<div ><p class="vertical first"> </p></div>
<div ><p class="vertical">Republican</p></div>
<div ><p class="vertical">Democrat</p></div>
<div ><p class="vertical">Libertarian</p></div>
<div ><p class="vertical">Green</p></div>
</div>
<div class='scroller'>
<div class='content'>
<div>
<div>Alabama</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Alaska</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arizona</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arzkansas</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arzkansas</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arzkansas</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arzkansas</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arzkansas</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arzkansas</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arzkansas</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arzkansas</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arzkansas</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arzkansas</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arzkansas</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
<div>
<div>Arzkansas</div>
<div>65</div>
<div>25</div>
<div>10</div>
<div>0</div>
</div>
</div>
</div>
</div>
.table{
height:300px;
width:500px;
}
.vertical{
transform: rotate(-90deg);
width:56px;
margin:0px;
}
.first{
padding-right: 268px;
}
.header{
height:150px;
width:500px;
display:flex;
}
.header>div{
display:flex;
}
.scroller{
height:calc(100% - 50px);
overflow-y:scroll;
}
.content{
width:100%;
display:table;
}
.content>div{
display:table-row;
width:500px;
}
.content>div>div{
display:table-cell;
}
http://jsfiddle.net/xjhun7zf/6/`
（这不是完美的，因为我在20分钟内就写完了）
如果有2个容器，一个用于头部，一个用于身体，则可以将头部设置为固定高度的静态位置，将身体设置为静止高度；