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, Jun 25 '14 at 06: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, Jun 25 '14 at 06:28
@F.Müller my problem is if scrollbar appears header and body borders are not aligned properly, how can i solve this — user3599482, Jun 25 '14 at 06:39

score 2 · Accepted Answer · answered Jun 25 '14 at 06:48

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

@SureshPonnukalai this worked fine but I have another table, in that i have 7 columns and i cant fix the width of each `` so how can i fix that. — user3599482, Jun 25 '14 at 11:30
Here you have assigned to 33% for 3 columns. like 7 columns use 14%. — Suresh Ponnukalai, Jun 25 '14 at 11:36
@SureshPonnukalai I did that but didnt work , can you see my fiddel, here it is http://jsfiddle.net/raghavendram040/56Ce8/ — user3599482, Jun 26 '14 at 07:17
Add "word-break:break-all;" property for your table cell. check this updated fiddel of yours. http://jsfiddle.net/56Ce8/2/ — Suresh Ponnukalai, Jun 26 '14 at 07:26
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. — Suresh Ponnukalai, Jun 26 '14 at 07:30

score 0 · Answer 2 · answered Jun 25 '14 at 06:25

0

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

Add this to your css

answered Jun 25 '14 at 06:25

Sasi

127
6

1

Surely that solution only works if the table is dragged to a specific width? Else it will just fall out of sync again. – James Hunt Jun 25 '14 at 06:27

score 0 · Answer 3 · edited May 23 '17 at 10:26

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 '17 at 10:26

Community

1
1

answered Jun 25 '14 at 06:25

James Hunt

2,448
11
23

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. – user3599482 Jun 25 '14 at 06:55
You could add it to the padding of the header table instead: http://jsfiddle.net/Bkg3Z/5/ – James Hunt Jun 25 '14 at 07:17
can you pls help me to fix this jsfiddle.net/raghavendram040/56Ce8 – user3599482 Jun 26 '14 at 07:26
This question already has a different accepted answer. If you have a different problem best post it as a different question. – James Hunt Jun 26 '14 at 08:24

score 0 · Answer 4 · answered Jun 25 '14 at 06:29

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.

How to write css for fixed header and scrollable table

4 Answers4