Use CSS to make the table headers in all Knack grids—or in specific views—sticky

API & Custom Code Show & Tell
1

See Video


/***************************sticky table header*****************************************/
.kn-table-wrapper {
  max-height: 31.25rem; /*control the height of the grid*/
  overflow-y: auto;
  border: 0.0625rem solid #ccc;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 0.0625rem solid #ccc;
}

thead  {
  position: sticky;
  top: 0;
  background-color: #f8f8f8;
  z-index: 1;
  transition: background-color 0.3s ease;
}

/* Optional hover/scroll feedback */
.kn-table-wrapper:hover thead th {
  background-color: #0077b6 !important;
  color: white;
}

The following CSS applies styling universally to all grid components within the Knack application.
To customize styling for a specific view, prepend each rule with its corresponding #view_xxx identifier

2

Hi @JAINI - thank you for sharing some additional formatting customisation in addition to sticky table headers.

It’s worth mentioning, if you are using KTL then you can simply use the keyword _sth. (Sticky Table Headers)

You can define how many records are visible before the headers are sticky and how high the table is in the view.

The below video also covers the addition of sticky Group headers.

2 Likes