Baz*_*Baz 8 html css jquery html5 html-table
我希望创建一个表格,其中线程被冻结,并且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>我已经玩过你的代码\xe2\x80\xa6
\n\noverflow-y: scroll;。transform. 我使用了固定值。\xe2\x80\xa6 另外，我添加了：
\n\n:hover为了突出 s 上的动作th。:nth-of-type()。\xe2\x80\xa6 我最终得到了这个片段：
\n\n// Doc here: https://joequery.github.io/Stupid-Table-Plugin/\r\n$("#simpleTable").stupidtable();table thead,\r\ntable tbody {\r\n display: block;\r\n}\r\n\r\ntable tbody {\r\n height: 500px;\r\n overflow-y: scroll; /* To make the scroll bar always visible */\r\n}\r\n\r\nthead th {\r\n position: relative;\r\n cursor: pointer; /* change cursor to show we can do an action */\r\n height: 90px;\r\n background: #ccc;\r\n border-bottom: 2px solid black;\r\n}\r\n\r\nthead th:hover {\r\n background: #ccf; /* Styling on hover */\r\n}\r\n\r\nthead th p {\r\n position: absolute;\r\n bottom: 20px;\r\n transform: rotate(-90deg);\r\n text-align: left;\r\n}\r\n\r\ntable th,\r\ntable th p,\r\ntable td {\r\n width: 75px;\r\n}\r\n\r\ntable td {\r\n text-align: center;\r\n}\r\n\r\ntable tr td:first-of-type {\r\n text-align: left;\r\n}\r\n\r\ntable tr:nth-of-type(odd) td {\r\n background: #eee;\r\n}\r\n\r\ntable tr:nth-of-type(even) td {\r\n background: #ddd;\r\n}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>\r\n\r\n<table id="simpleTable" class=\'vrt-header\'>\r\n\r\n <thead>\r\n <tr>\r\n <th data-sort="string"></th>\r\n <th data-sort="int">\r\n <p>Republican</p>\r\n </th>\r\n <th data-sort="int">\r\n <p>Democrat</p>\r\n </th>\r\n <th data-sort="int">\r\n <p>Libertarian</p>\r\n </th>\r\n <th data-sort="int">\r\n <p>Green</p>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n\r\n <tr>\r\n <td>\r\n Alabama\r\n </td>\r\n <td>\r\n 65\r\n </td>\r\n <td>\r\n 25\r\n </td>\r\n <td>\r\n 10\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n Alaska\r\n </td>\r\n <td>\r\n 75\r\n </td>\r\n <td>\r\n 15\r\n </td>\r\n <td>\r\n 10\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n Arizona\r\n </td>\r\n <td>\r\n 55\r\n </td>\r\n <td>\r\n 40\r\n </td>\r\n <td>\r\n 5\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n Arkansas\r\n </td>\r\n <td>\r\n 65\r\n </td>\r\n <td>\r\n 25\r\n </td>\r\n <td>\r\n 10\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n California\r\n </td>\r\n <td>\r\n 25\r\n </td>\r\n <td>\r\n 65\r\n </td>\r\n <td>\r\n 3\r\n </td>\r\n <td>\r\n 7\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n <tr>\r\n <td>\r\n ?\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n <td>\r\n 0\r\n </td>\r\n </tr>\r\n\r\n </tbody>\r\n\r\n\r\n</table>希望能帮助到你。
\n| 归档时间： |
|
| 查看次数： |
411 次 |
| 最近记录： |