Good evening! I want to know is it possible to make tables with sticky header in framework7?
hi do you got the solutions? i have same problems
It does. Check the contacts list example here: Contacts List (Table View) | Framework7 Documentation
To make F7 Data Table with Sticky Header, you will need following CSS:
.data-table-sticky-header {
max-height: 100vh;
}
.data-table-sticky-header thead th {
position: sticky;
top: 0;
z-index: 100;
}
Now apply data-table-sticky-header
class to your data-table
such as <div class="data-table data-table-init data-table-sticky-header card"></div>
That’s all you need to make the table header sticky.