mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-09-07 04:40:43 +02:00
Code Issues Releases Wiki Activity

feat: Sticky table headers

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-20 13:50:43 +07:00
parent ac897c9e63
commit 9ed4eebe82
9 changed files with 101 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
contents/_includes/patterns/sticky-table-headers.njk Normal file
View File

@@ -0,0 +1,18 @@
<table class="sticky-table-headers">
<thead>
<tr class="sticky-table-headers__sticky">
<td>{% rectangle %}</td>
<td>{% rectangle %}</td>
<td>{% rectangle %}</td>
</tr>
</thead>
<tbody>
{% for i in range(0, 3) -%}
<tr>
<td>{% rectangle %}</td>
<td>{% lines "hor", 3 %}</td>
<td>{% lines "hor", 2 %}</td>
</tr>
{%- endfor %}
</tbody>
</table>

12
contents/index.njk
View File

@@ -271,6 +271,12 @@ eleventyExcludeFromCollections: true
<div class="pattern__title">Sticky table column</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/sticky-table-headers/">
<div class="pattern__cover">{% include "patterns/sticky-table-headers.njk" %}</div>
<div class="pattern__title">Sticky table headers</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/teardrop/">
<div class="pattern__cover">{% include "patterns/teardrop.njk" %}</div>
@@ -295,6 +301,12 @@ eleventyExcludeFromCollections: true
<div class="pattern__title">Tree diagram</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/triangle-buttons/">
<div class="pattern__cover">{% include "patterns/triangle-buttons.njk" %}</div>
<div class="pattern__title">Triangle buttons</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/video-background/">
<div class="pattern__cover">{% include "patterns/video-background.njk" %}</div>

4
contents/sticky-table-column.md
View File

@@ -21,7 +21,7 @@ keywords: css position sticky, css sticky table column
<tbody>
<tr>
<td class="sticky-table-column__sticky">...</td>
<!-- Other columns -->
<!-- Other columns ... -->
</tr>
</tbody>
</table>
@@ -30,7 +30,7 @@ keywords: css position sticky, css sticky table column
## CSS
```css
.sticky-table-column__sticky {
.sticky-table-headers__sticky {
/* Background color */
background-color: #9ca3af;

39
contents/sticky-table-headers.md Normal file
View File

@@ -0,0 +1,39 @@
---
layout: layouts/post.njk
title: Sticky table headers
description: Create sticky table headers with CSS
keywords: css position sticky, css sticky table headers
---
## HTML
```html
<table class="sticky-table-headers">
<thead>
<tr class="sticky-table-headers__sticky"></tr>
</thead>
<tbody>
...
</tbody>
</table>
```
## CSS
```css
.sticky-table-headers__sticky {
/* Background color */
background-color: #9ca3af;
/* Stick to the left */
left: 0;
position: sticky;
/* Displayed on top of other rows when scrolling */
z-index: 9999;
}
```
{% demo %}
{% include "patterns/sticky-table-headers.njk" %}
{% enddemo %}