Keep my table header visible as user scrolls down

I would like the table header to stay visible as the user scrolls down the page. See the table here: http://www.pcigeomatics.com/resources/geomatica/sensor-support

thanks

That’s not an easy task at all and you would need a plugin to accomplish that properly. This one will do it (ignore that their demo fails as the download works fine). You can probably find many other similar also but you will most likely need to revise your tables.

It’s a complicated task because the header needs to be cloned and placed into position but then you also need to match the widths of the header with the widths of the table as they must work together in a responsive layout.

If position:sticky was fully supported on ‘th’ elements then it would be so easy in CSS alone as this works a treat in webkit only (chrome etc.).

.table-striped th{
position:sticky;
top:83px;
background:#ccc!important;
}
.body-innerwrapper{overflow:visible}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.