How can I create a scrollable table that has a fixed header?
For example: I am using the Table Records Widgets to show the name and location of several stores. I want my table to be vertically scrollable and I want the header row to always be visible.
To create a scrollable table that always shows the header, follow these steps:
Create a Table Widget (FixedTableHeader in this case) above your Table Records Widget (TableBodyScroll in this case) with 1 row and the same number of columns as the Table Widget (
2in this case).
The FixedTableHeader will be the new table header and the next 3 steps help recreating the look of the original header.
Style Classesof the FixedTableHeader to
In the FixedTableHeader Table, recreate the header text from the TableBodyScroll Record Table. In this case write
Namein the first column and
Cityin the second column.
For each one of the Cells in FixedTableHeader set the
For the first Cell of the FixedTableHeader select the Styles Editor and add
padding: 10px 10px 10px 20px;to the
Style Properties Applied. Set the padding of the other Cell to
Select the TableBodyScroll Table Records and set the Properties
This will hide the original header and remove the top margin.
Define the width of each Cell of the FixedTableHeader and do the same for the content Cells of TableBodyScroll. In this case set the
Widthof the first Cells to
33%and of the second Cells to
This sets the width of each cell and makes sure that the width will be equal for the table header and for the scrollable table body.
Add the following CSS snippet to the
Style Properties Appliedof the TableBodyScroll Record Table:
table-layout: fixed; word-wrap: break-word;
This CSS snippet makes sure that the width of the table body at runtime is always equal to the defined width and makes sure the contents don't overflow out of the table cells.
Enclose the TableBodyScroll Table Records Widget in a Container.
Select the Container and in the
Style Properties Appliedof the Styles Editor add the following CSS snippet:
height: 200px; overflow-y: auto; padding-top: 0px;
This CSS sets the height of the body of your table to
200px, adds a vertical scrollbar to your table body in case it is needed and removes the padding on the top of the table body.