Position Sticky and Table Headers【表格头部固定】

Posted on Edited on In

搬砖系列

Position Sticky and Table Headers (css-tricks.com)

防止大家打不开Page,我特地复制了下来(偷懒添加内容)

You can’t position: sticky; a <thead>. Nor a <tr>. But you can sticky a <th>, which means you can make sticky headers inside a regular ol’ <table>. This is tricky stuff, because if you didn’t know this weird quirk, it would be hard to blame you. It makes way more sense to sticky a parent element like the table header rather than each individiaul element in a row.

The issue boils down to the fact that stickiness requires position: relative to work and that doesn’t apply to <thead> and <tr> in the CSS 2.1 spec.

There are two very extreme reactions to this, should you need to implement sticky table headers and not be aware of the <th> workaround.

  • Don’t use table markup at all. Instead, use different elements (<div>s and whatnot) and other CSS layout methods to replicate the style of a table, but not locked out of using position: relative and creating position: sticky parent elements.
  • Use table elements, but totally remove all their styling defaults with new display values.

The first is dangerous because you aren’t using semantic and accessible elements for the content to be read and navigated. The second is almost the same. You can go that route, but need to be really careful to re-apply semantic roles.

Anyway, none of that matters if you just stick (get it?!) to using a sticky value on those <th> elements.

It’s probably a bit weird to have table headers as a row in the middle of a table, but it’s just illustrating the idea. I was imagining colored header bars separating players on different sports teams or something.

Anytime I think about data tables, I also think about how tricky it can be to make them responsive. Fortunately, there are a variety of ways, all depending on the best way to group and explore the data in them.

大概就是这么多内容(自己翻译2333 逃)

View

我这个写的比较简陋, 大家可以看原文的Demo,样式写得挺多的(好看++)

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
<table>
  <thead>
    <tr class="red">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem.</td>
      <td>Ullam.</td>
      <td>Vel.</td>
      <td>At.</td>
      <td>Quis.</td>
    </tr>
    ...
  </tbody>
</table>

大概就是这样的, 然后通过css设定tr th来达到固定表头

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
table {
  text-align: left;
  position:relative;
  border-collapse: collapse;
}
tr.red th {
  background: #ff4b4b;
}
tr.green th {
  background: #0db50d;
}
tr th {
  position: sticky;
  top: 0;
  padding: 10px 4px;
  color: #fff;
}

通过设置 tr rh position: sticky, (记得设置top or bottom 评论是这样说的 具体为什么我也不造233)

评论

reminder, folks: don’t forget to add a scope attribute to your th elements.
Also, define a top (or bottom) property for the sticky elements (can’t count the times I couldn’t understand why it didn’t work ‍♂️).

搬砖结束(🍑