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

feat: Sticky table column

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-20 10:38:49 +07:00
parent 9b1ec2fa57
commit ac897c9e63
7 changed files with 91 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
contents/_includes/patterns/sticky-table-column.njk Normal file
View File

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

6
contents/index.njk
View File

@@ -265,6 +265,12 @@ eleventyExcludeFromCollections: true
<div class="pattern__title">Status light</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/sticky-table-column/">
<div class="pattern__cover">{% include "patterns/sticky-table-column.njk" %}</div>
<div class="pattern__title">Sticky table column</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/teardrop/">
<div class="pattern__cover">{% include "patterns/teardrop.njk" %}</div>

48
contents/sticky-table-column.md Normal file
View File

@@ -0,0 +1,48 @@
---
layout: layouts/post.njk
title: Sticky table column
description: Create sticky table column with CSS
keywords: css position sticky, css sticky table column
---
## HTML
```html
<table class="sticky-table-column">
<thead>
<tr>
<th class="sticky-table-column__sticky">
...
</th>
<!-- Other header column ... -->
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-table-column__sticky">...</td>
<!-- Other columns -->
</tr>
</tbody>
</table>
```
## CSS
```css
.sticky-table-column__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-column.njk" %}
{% enddemo %}