How to make header row of a table (with horizontal and vertical scrollers) fixed?

Question

I've this sample table and I want to make header row of table visible all the time. Header row should scroll with horizontal scrollbar and shouldn't scroll with vertical scrollbar.

table:

<div style="width:800px; height:150px;overflow:scroll;margin:50px auto;">
<table style="width:1600px" border="1">
    <thead style="">
      <tr>
        <th style="width:800px">id_1</th>
        <th style="width:800px">id_2</th>
      </tr>
    </thead>
    <tbody style="">
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
    </tbody>
</table>
</div>

How can I do this with css only? Suggestions in this and this thread didn't seem to work, possibly due to presence of scrollbars.

EDIT

I'm looking for a css solution. Table structure and layout can't be changed. Other than this there is no restriction on html.

if you are still looking for an answer, check this: http://stackoverflow.com/questions/14977864/fixed-header-table-with-horizontal-scrollbar-and-vertical-scrollbar-on/35947146#35947146 — Anshuman, Mar 11 '16 at 18:42

score 1 · Answer 1 · answered Aug 22 '12 at 14:02

This solution doesn't require any div. Just css and a few Jquery lines.

<!DOCTYPE html>
<html>
 <head>
     <title></title>
</head>
<body>
   <table id="mytable">
        <thead class="fixedHeader">
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>                   
            </tr>
        </thead>
        <tbody class="scrollContent">
            <tr>
                <td><td>
                <td><td>
                <td><td>
                <td><td>
                <td><td>                    
            <tr>
        </tbody>
   </table>
 </body>
<html>

//css

 #mytable{
  position: absolute;
  top:3.2em;
 }
 #mytable thead.fixedHeader tr{
  width:100%;
  height:2.3em;
  position: fixed;
  display: block; 
  /*The background to be replaced by your own pix or color*/    
  background: url('img/bluegrad.png') 0 0 repeat-x;
  top:4.3em;
 } 
 #mytable tbody.scrollContent {
  width: 100%; 
 }

//JQuery
 $(function(){
      //get all th from the table
  //get all td from the table
  //td number has to be equal th number to avoid trouble
  var ths = $('table#my_table tr:nth-child(1) th');
  var tds = $('table#my_table tr:nth-child(2) td');

     $(tds).each(function(idx){
      //for each td get width 
  //and pass to corresponding th
  var w = $(this).width();
   $(ths).eq(idx).width(w);
     });
 })

score 0 · Answer 2 · answered Apr 14 '10 at 07:21

0

You can use CSS's position:fixed coupled with some other properties to achieve that.

See this for more information.

answered Apr 14 '10 at 07:21

Sarfraz

377,238
77
533
578

position:fixed won't work because header has to scroll with horizontal scrollbar. – understack Apr 14 '10 at 08:30

score 0 · Answer 3 · edited Jul 23 '19 at 03:19

Try this, using 2 divs

<div style="width:800px; margin:0 0 0 0;">
<table  width="800" border="1" cellpadding="3">
    <thead style="">
      <tr>
        <th style="width:400px">id_11</th>
        <th style="width:400px">id_2</th>
      </tr>
    </thead>
</table>
</div>
<div style="width:820px; height:150px;overflow:scroll;margin:0 0 0 0; overflow-x: hidden;">
<table  width="800" border="1" cellpadding="3">
    <tbody style="">
      <tr><td style="width:400px">1200</td><td style="width:400px">1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
    </tbody>
</table>
</div>

unfortunately I can't use this work around since in my case thead has to be present inside table to make other javascript things work. Besides column width in your case is 400px which has to be 800px. It makes a special case because total table width in my case is 1600px which is wider than my screen. Hence horizontal scrollbar is always required. — understack, Apr 15 '10 at 02:57

How to make header row of a table (with horizontal and vertical scrollers) fixed?

3 Answers3