View original (French)

HTML Table - Always Visible Header

Solved
Coutcout86 Posted messages 219 Status Member -  
nichola Posted messages 113 Status Member -
Bonjour,

I am not sure if my title is clear enough, so I will elaborate on my question.
I created an HTML table with a header (thead in particular) and I have content in my tbody.

However, there are countless data in my table, and when I scroll down, I can no longer see my header. So I tried CSS, the overflow property, but it doesn't work as I wish.

I wanted to know if there was a way to make the header appear once it is no longer visible when I scroll (using JavaScript, jQuery, etc.)?

To provide a concrete example (and for those who have Facebook), when you go to your profile and scroll to see your news feed, there is a small bar that appears.

Could someone help me solve this problem?

Thank you in advance.

1 answer

  1.
    nichola Posted messages 113 Status Member 11
     
    Hi,

    Guess what, there is actually a jquery plugin for that :)

    http://www.fixedheadertable.com/
    0
    1. Coutcout86 Posted messages 219 Status Member
       
      Yes, I saw this plugin but their example 
      $('selector').fixedHeaderTable({ footer: false, cloneHeadToFoot: false, fixedColumn: false });
      the 
      $('selector')
      is the ID (or class) of the 
      <table>
      or the 
      <thead>
      ?

      Thank you in advance.
      0
    2. nichola Posted messages 113 Status Member 11
       
      If we base ourselves on the source of the example on the site: 

      $('#tableBlock > table.myTable').fixedHeaderTable({ height: '600', altClass: 'odd', footer: hasFooter, cloneHeadToFoot: hasClone, fixedColumn: hasFixedColumn, themeClass: 'fancyTable' });

      This is the CSS selector for the table, so it could be $('table') if you have a single table, or any class that is applied to your table.
      0