表中的粘性行和列标题 [英] Sticky row and column header in table
问题描述
我正在尝试设计一个表，该表具有粘性的 thead 以及粘性的行标题。因此，基本上所有 th 元素都必须是粘性的。
I am trying to design a table that has a sticky thead and also sticky row headers. So, basically, all th elements must be sticky.
我偶然发现了 position：sticky css3属性似乎很适合该工作，尽管许多浏览器尚不支持该属性（给我一个问题）。但是MDN文档说：
I have stumbled across the position: sticky css3 attribute that seems to be a great candidate for the job, even though it's not yet supported in many browsers (which is not an issue to me). However the MDN documentation says:
position：sticky对表格元素的作用与 position：relative相同。
The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’.
考虑到这一点，我建立了一个适用于Safari 10.0的基本示例，即使粘性元素的边界不是保守的。
Getting this into consideration, I have built a basic example that works in Safari 10.0, even though the borders of the sticky elements are not conserved.
在firefox 50.0中，不显示边框，但标题不粘。
In firefox 50.0, the borders get don't get displayed but the headers are not sticky.
所以，我的问题是：如何通过使用 position：sticky 干净地实现此固定标头的位置。似乎实现（当实现时）还不完整，并且对表的支持甚至更少。
So, my question is: how can I cleanly achieve this fixed header positioning by using position: sticky. It seems like the implementation (when implemented) is not complete and tables are even less supported.
如果不可能的话，我也愿意采用JavaScript解决方案来实现这一目标（但是将jQuery添加到我的堆栈中会很麻烦，因为我的整个应用程序都在做出反应）。
If it's not possible, I am also open to a solution in JavaScript that achieves this (but adding jQuery to my stack would be quite cumbersome since my whole app is in react).
这是我目前所拥有的代码段。请注意，为了拥有一些粘性标头，您基本上需要使用Safari或chrome的Alpha版本。
Here is a code snippet of what I have for now. Please note that in order to have some sticky headers, you basically need safari or the alpha version of chrome.
div#container {
height: 200px;
width: 300px;
overflow: auto;
}
table {
border-collapse: collapse;
}
tbody th {
position: -webkit-sticky;
position: sticky;
left: 0px;
}
thead {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
th {
background: #B8C1C8;
border: 2px solid black;
}
<div id="container">
<table>
<thead>
<tr>
<th>hehe</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
</tr>
</thead>
<tbody>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
</tbody>
</table>
</div>
我拥有的资源尝试过的：
Resources I have tried:
- 来自耳鼻喉科的好文章
- thead上的位置粘，使我很好地领导了
职位的一些清洁用法：粘 c -
位置：粘性spec
- a great article from typanus
- Position sticky on thead that gave me a good lead on some clean usage of
position: sticky - the
position: stickyspec
推荐答案
似乎喜欢这里的一切。也称为冻结窗格效果。稍作调整的版本：
Seems likes you have everything there. It's also called as freezed panes effect. A bit tuned version:
更新：更好的边框。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
height: 20em;
overflow: scroll;
width: 50vw;
}
thead {
background-color: #eee;
color: gray;
left: 0;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
}
thead th {
background-color: #ddd;
}
thead th,
thead td {
box-shadow: 0 0 0 1px #ccc;
}
tr {
border-bottom: thin solid #ddd;
width: 100%;
}
th,
td {
min-width: 20em;
padding: 0.5em;
}
th {
background-color: #eee;
box-shadow: 1px 0 0 0 #ccc;
left: 0;
min-width: 5em;
position: -webkit-sticky;
position: sticky;
}
<table>
<thead>
<tr>
<th></th>
<td>
A
</td>
<td>
B
</td>
<td>
C
</td>
<td>
D
</td>
</tr>
</thead>
<tbody></tbody>
<tr>
<th>
1
</th>
<td>
A 1
</td>
<td>
B 1
</td>
<td>
C 1
</td>
<td>
D 1
</td>
</tr>
<tr>
<th>
2
</th>
<td>
A 2
</td>
<td>
B 2
</td>
<td>
C 2
</td>
<td>
D 2
</td>
</tr>
<tr>
<th>
3
</th>
<td>
A 3
</td>
<td>
B 3
</td>
<td>
C 3
</td>
<td>
D 3
</td>
</tr>
<tr>
<th>
4
</th>
<td>
A 4
</td>
<td>
B 4
</td>
<td>
C 4
</td>
<td>
D 4
</td>
</tr>
<tr>
<th>
5
</th>
<td>
A 5
</td>
<td>
B 5
</td>
<td>
C 5
</td>
<td>
D 5
</td>
</tr>
<tr>
<th>
6
</th>
<td>
A 6
</td>
<td>
B 6
</td>
<td>
C 6
</td>
<td>
D 6
</td>
</tr>
<tr>
<th>
7
</th>
<td>
A 7
</td>
<td>
B 7
</td>
<td>
C 7
</td>
<td>
D 7
</td>
</tr>
<tr>
<th>
8
</th>
<td>
A 8
</td>
<td>
B 8
</td>
<td>
C 8
</td>
<td>
D 8
</td>
</tr>
<tr>
<th>
9
</th>
<td>
A 9
</td>
<td>
B 9
</td>
<td>
C 9
</td>
<td>
D 9
</td>
</tr>
<tr>
<th>
10
</th>
<td>
A 10
</td>
<td>
B 10
</td>
<td>
C 10
</td>
<td>
D 10
</td>
</tr>
<tr>
<th>
11
</th>
<td>
A 11
</td>
<td>
B 11
</td>
<td>
C 11
</td>
<td>
D 11
</td>
</tr>
<tr>
<th>
12
</th>
<td>
A 12
</td>
<td>
B 12
</td>
<td>
C 12
</td>
<td>
D 12
</td>
</tr>
<tr>
<th>
13
</th>
<td>
A 13
</td>
<td>
B 13
</td>
<td>
C 13
</td>
<td>
D 13
</td>
</tr>
<tr>
<th>
14
</th>
<td>
A 14
</td>
<td>
B 14
</td>
<td>
C 14
</td>
<td>
D 14
</td>
</tr>
<tr>
<th>
15
</th>
<td>
A 15
</td>
<td>
B 15
</td>
<td>
C 15
</td>
<td>
D 15
</td>
</tr>
<tr>
<th>
16
</th>
<td>
A 16
</td>
<td>
B 16
</td>
<td>
C 16
</td>
<td>
D 16
</td>
</tr>
<tr>
<th>
17
</th>
<td>
A 17
</td>
<td>
B 17
</td>
<td>
C 17
</td>
<td>
D 17
</td>
</tr>
<tr>
<th>
18
</th>
<td>
A 18
</td>
<td>
B 18
</td>
<td>
C 18
</td>
<td>
D 18
</td>
</tr>
<tr>
<th>
19
</th>
<td>
A 19
</td>
<td>
B 19
</td>
<td>
C 19
</td>
<td>
D 19
</td>
</tr>
<tr>
<th>
20
</th>
<td>
A 20
</td>
<td>
B 20
</td>
<td>
C 20
</td>
<td>
D 20
</td>
</tr>
</table>
这篇关于表中的粘性行和列标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
