Tuesday, December 10, 2013

Page migrated

The page has been migrated to http://kamlekar.wordpress.com

Friday, June 21, 2013

Table tbody scroll (cross-browser)

There are many blogs based on tbody scroll of table but none (AFAIK) are cross-browser compatible. So, I thought to post one which works fine in IE8+, Chrome and Firefox. Let me know if there are any issues through below comments. HTML
<table>
    <thead>
        <tr>
            <th>head</th>
            <th>head</th>
            <th>head</th>
            <th>head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
    </tbody>
</table>
CSS
table {
    border-collapse: collapse;
    width: 100%;
}
thead {
    text-align:left;
    display: table;
    float: left;
    width: 100%;
}
thead tr {
    display: table-row;
    width: 100%;
}
tbody {
    display: block;
    height: 120px;
    overflow: auto;
    float: left;
    width: 100%;
}
tbody tr {
    display: table;
    width: 100%;
}
tbody tr {
    height: 18px;
}
tbody td {
    padding:1px 8px;
}
th, td {
    width: 25%;
}

tr:after{   /* IE8 fix */
    content: ".";
    margin-left: -3px; /* to hide the content above tr */ /* not necessary if you are ok with 1px gap */
    visibility: hidden;
}

You can also check the post on StackOverflow which I had asked and answered it after figuring it out. Here is the Working Fiddle and demo to check in IE8.