| ` tag. 57 | 58 | Use `.has-sticky-footer` to stick the footer. 59 | 60 | - Note that the footer should be inside of a ` | ` tag, and each cell should use a `` tag. 61 | 62 | Use `.has-sticky-column` to stick the first column. 63 | 64 | - Note that the first cells in each table row should use the ` | ` tag.
65 |
66 | ### Note about `.table-container`
67 |
68 | The Bulma `.table-container` wraps around a `.table` to assist with scrolling
69 | around large tables. The basic idea is that the container changes the `overflow`
70 | CSS rules on the container. This can affect the `.table`'s ability to stick
71 | as you'd expect.
72 |
73 | While `.has-sticky-column` will likely work as expected,
74 | `.has-sticky-header` and `.has-sticky-footer` may not. There are two options:
75 |
76 | 1. **Remove the `.table-container` altogether**, and just use the `.table` as is with the
77 | desired sticky classes.
78 |
79 | 2. Add some additional styles to the `.table-container` to change the vertical overflow rule
80 | and set a specific height on the container. The example below uses the screen height.
81 | Something smaller may be better, depending on your application.
82 |
83 | ```html
84 |
85 |
94 | ```
95 |
96 | ## Thanks
97 |
98 | [](https://bulma.io)
99 |
100 | Heavily inspired by [code found on CSS-Tricks](https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/).
101 |
--------------------------------------------------------------------------------
/_sticky-table.scss:
--------------------------------------------------------------------------------
1 | @use "node_modules/bulma/sass/utilities/css-variables.scss" as cv;
2 |
3 | $bulma-sticky-table-zindex: 5 !default;
4 |
5 | /*
6 | * Bulma variables
7 | */
8 |
9 | $table-background-color: cv.getVar("scheme-main") !default;
10 |
11 | $table-cell-border-color: cv.getVar("border") !default;
12 | $table-cell-border-style: solid !default;
13 | $table-cell-border-width: 0 0 1px !default;
14 |
15 | $table-head-background-color: transparent !default;
16 | $table-body-background-color: transparent !default;
17 | $table-foot-background-color: transparent !default;
18 |
19 | $table-row-hover-background-color: cv.getVar("scheme-main-bis") !default;
20 | $table-row-active-background-color: cv.getVar("primary") !default;
21 |
22 | $table-striped-row-even-background-color: cv.getVar("scheme-main-bis") !default;
23 | $table-striped-row-even-hover-background-color: cv.getVar(
24 | "scheme-main-ter"
25 | ) !default;
26 |
27 | $navbar-height: 3.25rem !default;
28 |
29 | @media screen {
30 | /*
31 | * Fix borders
32 | */
33 |
34 | .table.has-sticky-column,
35 | .table.has-sticky-footer,
36 | .table.has-sticky-header {
37 | border-collapse: separate;
38 |
39 | tbody,
40 | thead {
41 | td,
42 | th {
43 | border-top-width: 0;
44 | }
45 | }
46 |
47 | &.is-bordered {
48 | border-color: $table-cell-border-color;
49 | border-style: $table-cell-border-style;
50 | border-width: $table-cell-border-width;
51 |
52 | td,
53 | th {
54 | border-left-width: 0;
55 |
56 | &:last-child {
57 | border-right-width: 0;
58 | }
59 | }
60 |
61 | tbody tr:last-child,
62 | tfoot tr:last-child {
63 | td,
64 | th {
65 | border-bottom-width: 0;
66 | }
67 | }
68 | }
69 | }
70 |
71 | /*
72 | * Sticky Header
73 | */
74 |
75 | .table.has-sticky-header {
76 | thead th {
77 | @if $table-head-background-color ==
78 | 'transparent' or
79 | $table-head-background-color ==
80 | rgba(0, 0, 0, 0)
81 | {
82 | background-color: $table-background-color;
83 | }
84 | position: sticky;
85 | top: 0;
86 | z-index: $bulma-sticky-table-zindex;
87 | }
88 | }
89 |
90 | .has-navbar-fixed-top * .table.has-sticky-header thead th,
91 | .has-navbar-fixed-top .table.has-sticky-header thead th {
92 | top: $navbar-height;
93 | }
94 |
95 | .has-navbar-fixed-top * .modal .table.has-sticky-header thead th,
96 | .has-navbar-fixed-top .modal .table.has-sticky-header thead th {
97 | top: 0;
98 | }
99 |
100 | /*
101 | * Sticky Footer
102 | */
103 |
104 | .table.has-sticky-footer {
105 | tfoot th {
106 | @if $table-foot-background-color ==
107 | 'transparent' or
108 | $table-foot-background-color ==
109 | rgba(0, 0, 0, 0)
110 | {
111 | background-color: $table-background-color;
112 | }
113 | position: sticky;
114 | bottom: 0;
115 | z-index: $bulma-sticky-table-zindex;
116 | }
117 | }
118 |
119 | .has-navbar-fixed-bottom * .table.has-sticky-footer tfoot th,
120 | .has-navbar-fixed-bottom .table.has-sticky-footer tfoot th {
121 | bottom: $navbar-height;
122 | }
123 |
124 | .has-navbar-fixed-bottom * .modal .table.has-sticky-footer tfoot th,
125 | .has-navbar-fixed-bottom .modal .table.has-sticky-footer tfoot th {
126 | bottom: 0;
127 | }
128 |
129 | /*
130 | * Sticky Column
131 | */
132 |
133 | .table.has-sticky-column {
134 | tfoot th:first-child,
135 | thead th:first-child {
136 | @if $table-head-background-color ==
137 | 'transparent' or
138 | $table-head-background-color ==
139 | rgba(0, 0, 0, 0)
140 | {
141 | background-color: $table-background-color;
142 | }
143 | position: sticky;
144 | left: 0;
145 | z-index: $bulma-sticky-table-zindex + 1;
146 | }
147 |
148 | tbody th:first-child {
149 | @if $table-body-background-color ==
150 | 'transparent' or
151 | $table-body-background-color ==
152 | rgba(0, 0, 0, 0)
153 | {
154 | background-color: $table-background-color;
155 | }
156 | position: sticky;
157 | left: 0;
158 | z-index: $bulma-sticky-table-zindex;
159 | }
160 |
161 | tbody tr.is-selected th:first-child {
162 | background-color: $table-row-active-background-color;
163 | }
164 |
165 | &.is-hoverable {
166 | tbody tr:not(.is-selected):hover th:first-child {
167 | background-color: $table-row-hover-background-color;
168 | }
169 | }
170 |
171 | &.is-striped {
172 | tbody tr:not(.is-selected):nth-child(even) th:first-child {
173 | background-color: $table-striped-row-even-background-color;
174 | }
175 | }
176 |
177 | &.is-striped.is-hoverable {
178 | tbody tr:not(.is-selected):nth-child(even):hover th:first-child {
179 | background-color: $table-striped-row-even-hover-background-color;
180 | }
181 | }
182 | }
183 | }
184 |
--------------------------------------------------------------------------------
/bulma-with-sticky-table.scss:
--------------------------------------------------------------------------------
1 | @use 'node_modules/bulma/bulma';
2 | @use 'sticky-table';
3 |
--------------------------------------------------------------------------------
/gulpfile.d.ts:
--------------------------------------------------------------------------------
1 | export {};
2 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import * as dartSass from 'sass';
3 | import gulpSass from 'gulp-sass';
4 | const sass = gulpSass(dartSass);
5 | const publicSCSSFunction = () => {
6 | return gulp
7 | .src('*.scss')
8 | .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
9 | .pipe(gulp.dest('.'));
10 | };
11 | gulp.task('public-scss', publicSCSSFunction);
12 | const watchFunction = () => {
13 | gulp.watch('*.scss', publicSCSSFunction);
14 | };
15 | gulp.task('watch', watchFunction);
16 | gulp.task('default', () => {
17 | publicSCSSFunction();
18 | watchFunction();
19 | });
20 |
--------------------------------------------------------------------------------
/gulpfile.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable node/no-unpublished-import */
2 |
3 | import gulp from 'gulp'
4 |
5 | import * as dartSass from 'sass'
6 | import gulpSass from 'gulp-sass'
7 | const sass = gulpSass(dartSass)
8 |
9 | /*
10 | * Compile SASS
11 | */
12 |
13 | const publicSCSSFunction = () => {
14 | return gulp
15 | .src('*.scss')
16 | .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
17 | .pipe(gulp.dest('.'))
18 | }
19 |
20 | gulp.task('public-scss', publicSCSSFunction)
21 |
22 | /*
23 | * Watch
24 | */
25 |
26 | const watchFunction = () => {
27 | gulp.watch('*.scss', publicSCSSFunction)
28 | }
29 |
30 | gulp.task('watch', watchFunction)
31 |
32 | /*
33 | * Initialize default
34 | */
35 |
36 | gulp.task('default', () => {
37 | publicSCSSFunction()
38 | watchFunction()
39 | })
40 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
22 | 13 | bulma-sticky-table 14 |15 |16 | A Bulma-friendly way to stick a table header, table footer, first column, or all three! 17 | 18 | 19 | Grab the SCSS from GitHub 20 | 21 |
25 |
362 | 26 | Example Table 27 |28 |
29 |
63 |
30 |
35 |
36 |
37 |
62 |
38 |
61 |
39 | <table class="table has-sticky-header has-sticky-footer has-sticky-column">
60 |
64 |
77 | Table Class Toggles65 | 70 | 76 |
68 |
78 | 69 | bulma-sticky-table (Modal Test) 70 |71 |72 | A Bulma-friendly way to stick a table header, table footer, first column, or all three! 73 | 74 | 75 | Grab the SCSS from GitHub 76 | 77 |
79 |
80 |
376 |
81 |
375 |
82 |
85 | Modal Test83 | 84 |
372 |
373 |
374 | |
|---|