Search code examples
htmlhtml-tableflexigrid

How to make a normal Html table to be looks like flexigrid?

I want to know how to convert a normal html table to be looked like flexigrid. Is it possible to avoid scrolling of headers in the table like flexigrid?

Solution

  • It's possible to fix the head with CSS. It will always stay visible on top.

    <table>
 <thead style="position:fixed; top:0px; z-index:42; background:#fff;">
  <tr>
   <th>head cell a</th>
   <th>head cell b</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1a</td>
   <td>1b</td>
  </tr>
  <tr>
   <td>2a</td>
   <td>2b</td>
  </tr>
  <!-- ... -->
 </tbody>
</table>