I wish to create a table where the thread is frozen and the labels in the thead are orientated in a vertical manner. My attempt is below, however there are a number of issues with this implementation since I am very new to css.
One thing I don't like about my solution is that it is not obvious that there are more rows to be scrolled into view as the scroll bar is hidden until you start scrolling the table. Is there a way of making the scroll bar permanently visible?
There is also a large scape at the top of the thead above where the party names are displayed. I can make this gap bigger by playing around with the values in th.vertical but I cant eliminate it. How can I force the thead to be only as high as the text it contains?
Finally, I would like the vertical text in the thead to be centred with respect to the column values but I haven't figured out how to do this. How might I do this?
最后，我希望thead中的垂直文本相对于列值居中，但我还没想出如何做到这一点。我怎么能这样做？
I would also like to be able to sort on any column.
I don't know about another way to always show the scrollbar than overflow-y: scroll;.
我不知道另一种总是显示滚动条的方法而不是overflow-y：scroll;。
I modified all the styling of your headers, but I couldn't find an easy way to automatically adjust the height after your transform. I used a fixed value.
我修改了标题的所有样式，但是我找不到一种简单的方法来在变换后自动调整高度。我使用了固定值。
The new styling is correcting this point.
新造型正在纠正这一点。
I suggest you to try and read about the Stupid-Table-Plugin for jQuery to easily sort a table.
我建议你尝试阅读有关jQuery的Stupid-Table-Plugin以轻松排序表。
… Plus, I added:
...另外，我补充说：
Some styling on :hover to highlight the action on the ths.
一些造型：悬停以突出显示该动作。
An alternation of color for the rows, using the :nth-of-type() selector.
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;
}
Republican
Democrat
Libertarian
Green
Alabama
65
25
10
0
Alaska
75
15
10
0
Arizona
55
40
5
0
Arkansas
65
25
10
0
California
25
65
3
7
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
?
0
0
0
0
Hope it helps.
希望能帮助到你。
#2
2
1) This is probably on a mac, which uses overlay scrollbars by default. Chrome and Safari support webkit-scroll properties that let you make it always visible, but not sure if you can override that in Firefox.
3) What you want is actually the default behavior of a table. But it isn't working for two reasons. This might be the toughest to tackle on your own, without using an off-the-shelf component. So unless you're doing this as an exercise I suggest not trying to reinvent the wheel. Instead, find a jquery plugin or angular component or something that provides this. I don't think it's possible to do all this (including rotating the headers) in a cross-browser compatible way without writing a bunch of Javascript.
First reason is that setting div.vertical { position:absolute } takes them out of normal flow; the th positions its normal-flow children to align with the whole column, but not position:absolute stuff.
Second is you subtly created 3 tables because of tr { display:block } and the tbody {display:block} that allows scrolling. The layout code (approximately) sees them as a regular
s so sees
...
....
and creates a table cell, row, and section (aka tbody) to hold each
. Then inside that div it sees tr so creates a table to hold them.
So the columns in the table that lives under thead > tr aren't the same columns that hold your data. So even if you fixed the first reason, you'd still be contending with this.
(it is not perfect, because i wrote that in 20 minutes)
（这不完美，因为我在20分钟内写到了）
if you have 2 container, one for the head and one for the body, then you can set the head to a static position with a fixed height and your body with the rest height;
京公网安备 11010802041100号