CODEWITHSUNDEEP
javascriptjquerycss
Luis
Luis

Reputation: 2715

Fix header in a table

I am developing a small page that is necessary to fix the header of a table, when the user scrolls, the header is still there. I wrote a small piece of code, a sample of my page, in jsfiddle and it isn't working and I don't know why. What am I doing wrong?

You can see what I have done so far here.

Follow this example

Upvotes: 2

Views: 283

Answers (4)

Yogee
Yogee

Reputation: 1442

I've faced similar issue and I had some or other problem with floating header rows of table. Some of the problem that I faced were browser specific and some were just obvious e.g. floating header doesn't scroll with horizontal scroll.
At: http://rajputyh.blogspot.in/2011/12/floatingfixed-table-header-in-html-page.html , I tried to solve all the common problems. Hope it will help.

Upvotes: 1

Kalle H. Väravas
Kalle H. Väravas

Reputation: 3615

Ok, it took some time to understand what you need. The thing you want to do is called "floating table header". I have tried all possible jQuery scripts that do that. I have had issues with all of them, but one. If you are simply looking for this feature and there is no sentimental value of your fiddle-code. Then use Floating header plugin. It is the most advance floating header plugin. Check the demo.

Live demo based on your fiddle, by adding Floating header plugin:
http://jsfiddle.net/2AKMh/16/

Upvotes: 1

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11548

You need something like this (ignore the sizing and paddings, that was just for my sake to get it to work before i pass it to you):

CSS:

td 
    {
        padding:10px;
        }
        th 
        {
            position:fixed;
            background:black;
            color:White;
            width:378px;
            padding:10px;
            }
     #tableContainer 
     {
         width:400px;
         height:400px;
         overflow-y:scroll;
         overflow-x:hidden;
         border:solid 1px #ccc;
         }
     table 
     {
         width:400px;           
         }

HTML:

<div id='tableContainer'>
<table cellpadding="0" cellspacing='0'>
    <tr>
        <th>Header</th>
    </tr>
    <tr>
        <td>Text</td>
    </tr>
    <tr>
        <td>text</td>
    </tr>
    <tr>
        <td>text</td>
    </tr>
</table>
</div>

Upvotes: 1

CuriousMind
CuriousMind

Reputation: 34135

Add the following to your stylesheet:

.PersistentHeader{
      position:fixed;
 }

Upvotes: 2

Related Questions