Question

Sticky Table Headers

Forms Version 10

Updated December 15, 2016

asked on December 13, 2016

Hi Everyone,

I'm trying to use some javascript to make the column headers in my Forms table 'Stick' so that they are always visible at the top of the table when scrolling through a table with lots of rows. It's working to an extent, however it looks as though the <thead> element is transparent and the table rows scroll underneath it

Does anyone have any suggestions about CSS properties I might need to change so that the table rows always appear below the header?

0 0

Answer

SELECTED ANSWER

replied on December 13, 2016

If you are trying to have the header be sticky the rows need to scroll underneath it. You can give the thead a background color to hide the elements directly underneath.

0 0

replied on December 15, 2016

Thank you very much Xavier - I'm feeling a little dim for not figuring that one out for myself!

0 0

replied on December 15, 2016

No worries!

0 0

Replies

replied on December 15, 2016 • Show version history

Hi Steve,

I'm using the below plug-in to achieve the functionality described above.

https://github.com/jmosbech/StickyTableHeaders

The plugin is located on the server and is initialised using the below javascript code.

$(document).ready(function () {
  $.getScript('http://<server_goes_here>/Forms/js/jquery.stickytableheaders.min.js', function(){
      var $table = $('table');
    $table.stickyTableHeaders();
    });
});

And added the following CSS property for the <thead> element.

thead {background-color: #FFFFFF}

Hope that helps!

2 0

replied on December 14, 2016

This is interesting Ronald, can you share your code when you get it finished and working to your liking.

Thanks

0 0

You are not allowed to follow up in this post.

Question

Question

Sticky Table Headers

Answer

Replies

Sign in to reply to this post.