How to freeze table headers

Freezing the table header keeps the column titles visible while scrolling through long tables. This helps readers understand the data context without repeatedly scrolling back to the top.

Document360 provides an in-built table freeze functionality. You can freeze your header row or column using this functionality.

As a workaround, you can also follow the steps below to freeze the header row for tables in your knowledge base.

1. Navigate to Settings () > Knowledge base site > Site customization > Custom CSS & JavaScript in the Knowledge base portal.

2. In the CSS tab, paste the following code.

.fixed-header-table div[data-type="table-content"]{
    position: relative;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
}
table {
    width: 100%;
    border-collapse: collapse;
}
tbody th {
    position: sticky;
    top: 0;
    z-index: 2;
}

3. Click Save.

4. Navigate to your article and open the code view.

5. Wrap up the table HTML code inside the following class.

<div class="fixed-header-table">
Your table code
</div>

NOTE

The header row remains fixed at the top of the table while the reader scrolls through the table content.

Outcome

When a reader scrolls through a long table, the column headers remain visible at the top of the table, making it easier to interpret the data.