HTML table sticky header

1

Hi

I see some successful examples online of people making the first row of an html table fixed.
I understand somehow I need to make the element sticky, and set the zorder but I’m struggling to apply this to an html table in my project. Apparently overflow settings stuff it up too.

Been trying jquery commands, css style properties and class properties but no success.

Any help/examples greatly appreciated.

2

I use this.

css:
.fixedColumn th:first-child, .fixedColumn td:first-child { position:sticky; left:0px; z-index:2; }

HTML:
.<table id="mytable" class="table-bordered table fixedColumn" style="width:100%; ">

3

This looks right but I’m not exactly sure where to put this code, relative to a grid I have in the design screen.

4

I’m not sure about the grids from the Toolbox. I used a Container and entered my html inside that (content property of the Container).

5

Look at bootstrap datatable. There’s lots of examples out there.

6

I don’t use bootstrap, just the common grid. For the header I use a second common grid control just above the scrolling grid for column headers.

John

7

That’s my work around too but really wanted to get that sticky header going. Seen it working on a column too.

8

@GaryGorsline is right - if you want a great looking table with lots of features, Bootstrap Datatables are the way to go.

If you just want to put one on the standard grid. think about a second grid with just the headings as a “hat” for your actual grid.