How to write css for fixed header and scrollable table

Question

I have table and I need fixed header and scroll able body. I did it but I have a border for it so because of scroll bar header and body is not aligned. I need some help to fix this.

Here is my JSFiddle,

JSFiddle

CSS

    table.tableSection {
    display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}
table.tableSection tbody {
    overflow: auto;
    height: 150px;
}
table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
border: 1px solid #ccc;
}

Please help me in this.

So what is your attempt? I do not understand what your problem is. — F. Müller
– F. Müller, Commented Jun 25, 2014 at 6:23
@F.Müller, he hasn't made an attempt to solve the problem in his code, he has said he made it scrollable, the problem arose and now he is here for an answer. — James Hunt
– James Hunt, Commented Jun 25, 2014 at 6:28
@F.Müller my problem is if scrollbar appears header and body borders are not aligned properly, how can i solve this — user3599482
– user3599482, Commented Jun 25, 2014 at 6:39

Suresh Ponnukalai · Accepted Answer · 2014-06-25 06:48:07Z

2

First you need to use jquery to identify whether your table body content have scrollbar or not. Next you need to toggle one class with the calculation of adding scrollbar width. So here is the solution with that.

HTML

 <table class="tableSection">
<thead>
    <tr>
        <th><span class="text">album</span>

        </th>
        <th><span class="text">song</span>

        </th>
        <th><span class="text">genre</span>

        </th>
    </tr>
</thead>
<tbody id="mytest">
    <tr>
        <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
        <td>td</td>
        <td>td</td>
        <td>td</td>        </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
        <td>td</td>
        <td>td</td>
        <td>td</td>        </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
</tbody>
</table>

CSS

 table.tableSection {
    display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}
table.tableSection tbody {
    overflow: auto;
    height: 150px;    
}
table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
border: 1px solid #ccc;
}
.extrawidth{
    width:calc(100% - 18px) !important;
}

JQUERY

(function($) {
$.fn.hasScrollBar = function() {
    return this.get(0).scrollHeight > this.height();
}
})(jQuery);

$(document).ready(function(){    
 if($('#mytest').hasScrollBar())
 {
   $('.tableSection thead').toggleClass('extrawidth');
 }
});

Have a Fiddle Demo

answered Jun 25, 2014 at 6:48

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3599482 Over a year ago

@SureshPonnukalai this worked fine but I have another table, in that i have 7 columns and i cant fix the width of each <td> so how can i fix that.

Suresh Ponnukalai Over a year ago

Here you have assigned to 33% for 3 columns. like 7 columns use 14%.

user3599482 Over a year ago

@SureshPonnukalai I did that but didnt work , can you see my fiddel, here it is jsfiddle.net/raghavendram040/56Ce8

Suresh Ponnukalai Over a year ago

Add "word-break:break-all;" property for your table cell. check this updated fiddel of yours. jsfiddle.net/56Ce8/2

Suresh Ponnukalai Over a year ago

we have fixed width for table column. if you are adding any length text without space like "sdfsfdsfsfsdfsfsdfsfdsfdsfsdfsf", table will allow to show the entire text if it is more than the assigned width also. This CSS property will stop this behavior. Check it in google to get more idea about it.

Sasi · Accepted Answer · 2014-06-25 06:25:26Z

0

table.tableSection thead {
    float: left;
    width: 97%;
}

Add this to your css

answered Jun 25, 2014 at 6:25

Sasi

1196 bronze badges

1 Comment

James Hunt Over a year ago

Surely that solution only works if the table is dragged to a specific width? Else it will just fall out of sync again.

Community · Accepted Answer · 2017-05-23 10:26:13Z

0

If you make the table a fixed size, you can split it into two. The headers which are lets say 500px, and the content which is 500px + the width of the scrollbar.

Either you can approximate it (around 12px) as can be seen on the updated fiddle here:

table.tableSection {
    display: table;
    width: 500px;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}
table.tableSection tbody {
    overflow: auto;
    width:512px;
    height: 150px;
}

or use Javascript to work out the size of the scrollbar and add it to the tables width using the solution proposed on this answer.

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Jun 25, 2014 at 6:25

James Hunt

2,53813 silver badges24 bronze badges

4 Comments

user3599482 Over a year ago

this is fine but cant we fix table for 100% because i am designing responsive web page. So I dont have to use px more.

James Hunt Over a year ago

You could add it to the padding of the header table instead: jsfiddle.net/Bkg3Z/5

user3599482 Over a year ago

can you pls help me to fix this jsfiddle.net/raghavendram040/56Ce8

James Hunt Over a year ago

This question already has a different accepted answer. If you have a different problem best post it as a different question.

Giulio · Accepted Answer · 2014-06-25 06:29:27Z

0

table {
  width: 916px; /* every td or th in thead + 16px for scrollbar */
}

tbody, thead tr{
  display: block;
}

tbody {
  height: 200px;
  overflow-y: auto;
  text-align:center;
}

tbody td, thead th {
   width: 225px;
}

thead th:last-child {
  width: 241px; /* td + 16px for scrollbar */
}

Of course you can give the width you want.

This is what I used for my page and it works great.

answered Jun 25, 2014 at 6:29

Giulio

1418 bronze badges

Collectives™ on Stack Overflow

How to write css for fixed header and scrollable table

4 Answers 4

5 Comments

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related