Tables sticky header behavior

Table views now have an improved sticky header behavior if the table is forced to scroll.

New Class

The existing markup and classes for tables remain the same, however, there is now a new modifier class for tables when they are forced to scroll:

.kn-table--has-sticky-headers .

📘

Note

This new class sets an explicit background color for table headers (thead) when using the “Clean” format, to help prevent content overlap when sticky. This could potentially affect apps using custom CSS to set a background color on table headers due to the new CSS rule potentially having a greater specificity. If this is an issue, use the following rules to target table headers and apply custom styles:

/* Applies a background color to table headers */
#knack-body .kn-table thead {
    background-color: #fff;
}

/* Applies a background color to sticky table headers for tables using the 'clean' format */
#knack-body .kn-table--has-sticky-headers:not(.is-bordered) thead {
    background-color: #fff;
}