How to make table header fixed using css or jquery

Question

0.00/5 (No votes)

See more:

Hi All,

I searched a lot in the internet and also applied the solutions but none of them worked for me actually. So, finally I am here and need your help.

Problem:
I have a blank asp.net grid and its getting populated using jquery ajax. I am specifying specific width for all the columns. I want the table header to be remain fixed while scrolling.

Now, I applied few css (as seen on internet):

CSS

#table_id thead, #table tbody
{
   display: block;
   width: 100%;
}

But, the whole table structure is getting messed up.

I also tried with plugins like "sticky table headers", "freeze headers", "datatable plugins" etc. but came with no luck.

Please give me some ideas to sort it out.

Thank you.

Posted 1-Oct-15 3:13am

Member 11072126

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Palash Mondal_ · Answer 1 · 2015-10-01T03:34:00

You can do this using pure CSS like:

CSS

table {
    border-spacing: 0;
    width:100%;
}
td + td {
    border-left:1px solid #eee;
}
td, th {
    border-bottom:1px solid #eee;
    background: #ddd;
    color: #000;
    padding: 10px 25px;
}
th {
    height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;
}
th div {
    position: absolute;
    background: transparent;
    color: #fff;
    padding: 9px 25px;
    top: 0;
    margin-left: -25px;
    line-height: normal;
    border-left: 1px solid #800;
}
th:first-child div {
    border: none;
}

DEMO: FIDDLE[^]

Krunal Rohit · Answer 2 · 2015-10-01T03:27:00

Solution 1

I think you want to make the table boy scrollable. You can do it using CSS:

CSS

thead, tbody { display: block; }

tbody { 
    overflow-y: auto;    /* vertical scroll    */
    overflow-x: hidden; 
}

Fiddle[^]
-KR

Posted 1-Oct-15 3:27am

Krunal Rohit

Naveen.Sanagasetti · Answer 3 · 2015-10-01T04:12:00

As per my understand the post you are looking for scrollable gridview with fixed headers, If your requirement is that then refer below link here I explain you clearly how to achieve the above requirement with simple example http://www.dotnetspider.com/resources/45021-Scrollable-GridView-using-JQuery.aspx[^]

How to make table header fixed using css or jquery

3 solutions

Solution 2

Solution 1

Solution 3

Add your solution here

Preview 0