0

Is there a way that I can make my Table header fixed without using any Javascript, by using just CSS?

Gunjan Kothari
  • 64
  • 5
  • 1
    This [question is asking for a non-javascript version](http://stackoverflow.com/questions/3338758/html-fixed-header-table-scrollbar). This [page shows different approaches](http://salzerdesign.com/test/fixedTable.html). This [question is asking for html5 css only approach](http://stackoverflow.com/questions/17584702/how-to-add-a-scrollbar-to-an-html5-table) – surfmuggle Apr 27 '14 at 18:53

1 Answers1

0

How about:

CSS:

thead {
position: fixed;
}

HTML:

<table>
<thead></thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>

Now, any tag called <thead> will automatically be fixed. If you only want specific tags to be fixed, then try:

CSS:

.tofix {
position:fixed;
}

HTML:

 <table>
    <thead class="tofix"></thead>
    <tbody>
    <tr>
    <td>
    </td>
    </tr>
    </tbody>
    </table>

Then any tag with the classname will be fixed. On a side note: doing thead.tofix in CSS will make so that only <thead> tags can have that class.

Brendan
  • 1,399
  • 1
  • 12
  • 18