CODEWITHSUNDEEP
jqueryhtmlcss
user3599482
user3599482

Reputation: 157

How to write css for fixed header and scrollable table

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.

Upvotes: 1

Views: 1534

Answers (4)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

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

Upvotes: 2

Giulio
Giulio

Reputation: 131

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.

Upvotes: 0

James Hunt
James Hunt

Reputation: 2528

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.

Upvotes: 0

Sasi
Sasi

Reputation: 119

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

Add this to your css

Upvotes: 0

Related Questions