content logo

Bootstrap Tables:

Bootstrap Table Fixed First Rows with Scrolling

Tables are probably the best method you can display large amounts of data in a website. It allows you to show any information you want organized in a tabular format with rows and columns. You have a lot of options and flexibility when it comes to tables which is great if you want a unique design for your website. Tables can be a basic spreadsheet or a fully animated, colourful, stylish layout. Both can get the job done but which one looks better in your eyes? As much as it is cool to have a lot of animations and effects in a page, too busy of a design can be distracting for the users which defeats the purpose of a table. The table is supposed to make you focus on the data. When it comes to tables, I would say functionality is more important than style. Besides, simplicity is a nice style itself; so, try your best not to overuse effects and colours when designing the tables for your website.

The code we have here is Bootstrap fixed header row template. It features a header table with the title at the top and the table at the bottom. A Bootstrap header table with a fixed first row is great when you need to compare and analyse large amounts of data as you can always keep track of it even when you scroll down.

#

Fixed First Row

#

Header Table

#

Bootstrap Header Table

#

Bootstrap Fixed Header Row


<!-- This script got from frontendfreecode.com -->
<div class="container">
    <h2 id="mynav">| my navigation bar | my navigation bar |</h2>
    <h1>Table Fixed Header</h1>
    <table id="mytable" class="table table-bordered table-striped table-fixed-header">
        <thead class="header">
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data Column 1</td>
                <td>Data Column 2</td>
                <td>Data Column 3</td>
            </tr>
        </tbody>
    </table>
    <h1>Another table</h1>
    <table id="mytable2" class="table table-bordered table-striped table-fixed-header">
        <thead class="header">
            <tr style="color:#00f;">
                <th>Column 11</th>
                <th>Column 22</th>
                <th>Column 33</th>
                <th>Column 44</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data Column 11</td>
                <td>Data Column 22</td>
                <td>Data Column 33</td>
                <td>Data Column 44</td>
            </tr>
        </tbody>
    </table>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
#mynav {
    top: 0;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1030;
    height: 40px;
    color: #aaa;
    background-color: #222;
    text-align: center;
}

body {
    padding-top: 60px;
}

table .header-fixed {
    position: fixed;
    top: 40px;
    z-index: 1020;
    /* 10 less than .navbar-fixed to prevent any overlap */
    border-bottom: 1px solid #d5d5d5;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, 0.1);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    /* IE6-9 */
}
$(document).ready(function () {
    // add 30 more rows to the table
    var row = $('table#mytable > tbody > tr:first');
    var row2 = $('table#mytable2 > tbody > tr:first');
    for (i = 0; i < 30; i++) {
        $('table#mytable > tbody').append(row.clone());
        $('table#mytable2 > tbody').append(row2.clone());
    }
    // make the header fixed on scroll
    $('.table-fixed-header').fixedHeader();
});
(function () {
    (function ($) {
        return $.fn.fixedHeader = function (options) {
            var config;
            config = {
                topOffset: 40,
                bgColor: "#EEEEEE"
            };
            if (options) {
                $.extend(config, options);
            }
            return this.each(function () {
                var $head, $win, headTop, isFixed, o, processScroll, ww;
                processScroll = function () {
                    var headTop, i, isFixed, scrollTop, t;
                    if (!o.is(":visible")) {
                        return;
                    }
                    i = void 0;
                    scrollTop = $win.scrollTop();
                    t = $head.length && $head.offset().top - config.topOffset;
                    if (!isFixed && headTop !== t) {
                        headTop = t;
                    }
                    if (scrollTop >= headTop && !isFixed) {
                        isFixed = 1;
                    } else {
                        if (scrollTop <= headTop && isFixed) {
                            isFixed = 0;
                        }
                    }
                    if (isFixed) {
                        return $("thead.header-copy", o).removeClass("hide");
                    } else {
                        return $("thead.header-copy", o).addClass("hide");
                    }
                };
                o = $(this);
                $win = $(window);
                $head = $("thead.header", o);
                isFixed = 0;
                headTop = $head.length && $head.offset().top - config.topOffset;
                $win.on("scroll", processScroll);

                // hack sad times - holdover until rewrite for 2.1
                $head.on("click", function () {
                    if (!isFixed) {
                        return setTimeout((function () {
                            return $win.scrollTop($win.scrollTop() - 47);
                        }), 10);
                    }
                });
                $head.clone().removeClass("header").addClass("header-copy header-fixed").appendTo(o);
                ww = [];
                o.find("thead.header > tr:first > th").each(function (i, h) {
                    return ww.push($(h).width());
                });
                $.each(ww, function (i, w) {
                    return o.find("thead.header > tr > th:eq(" + i + "), thead.header-copy > tr > th:eq(" + i + ")").css({
                        width: w
                    });
                });
                o.find("thead.header-copy").css({
                    margin: "0 auto",
                    width: o.width(),
                    "background-color": config.bgColor
                });
                return processScroll();
            });
        };
    })(jQuery);
}).call(this);
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css'>
<link rel="stylesheet" href="https://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css'>
<link rel="stylesheet" href="https://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
#mynav {
    top: 0;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1030;
    height: 40px;
    color: #aaa;
    background-color: #222;
    text-align: center;
}

body {
    padding-top: 60px;
}

table .header-fixed {
    position: fixed;
    top: 40px;
    z-index: 1020;
    /* 10 less than .navbar-fixed to prevent any overlap */
    border-bottom: 1px solid #d5d5d5;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, 0.1);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    /* IE6-9 */
}
</style>

</head>
<body>
<div class="container">
    <h2 id="mynav">| my navigation bar | my navigation bar |</h2>
    <h1>Table Fixed Header</h1>
    <table id="mytable" class="table table-bordered table-striped table-fixed-header">
        <thead class="header">
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data Column 1</td>
                <td>Data Column 2</td>
                <td>Data Column 3</td>
            </tr>
        </tbody>
    </table>
    <h1>Another table</h1>
    <table id="mytable2" class="table table-bordered table-striped table-fixed-header">
        <thead class="header">
            <tr style="color:#00f;">
                <th>Column 11</th>
                <th>Column 22</th>
                <th>Column 33</th>
                <th>Column 44</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data Column 11</td>
                <td>Data Column 22</td>
                <td>Data Column 33</td>
                <td>Data Column 44</td>
            </tr>
        </tbody>
    </table>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {
    // add 30 more rows to the table
    var row = $('table#mytable > tbody > tr:first');
    var row2 = $('table#mytable2 > tbody > tr:first');
    for (i = 0; i < 30; i++) {
        $('table#mytable > tbody').append(row.clone());
        $('table#mytable2 > tbody').append(row2.clone());
    }
    // make the header fixed on scroll
    $('.table-fixed-header').fixedHeader();
});
(function () {
    (function ($) {
        return $.fn.fixedHeader = function (options) {
            var config;
            config = {
                topOffset: 40,
                bgColor: "#EEEEEE"
            };
            if (options) {
                $.extend(config, options);
            }
            return this.each(function () {
                var $head, $win, headTop, isFixed, o, processScroll, ww;
                processScroll = function () {
                    var headTop, i, isFixed, scrollTop, t;
                    if (!o.is(":visible")) {
                        return;
                    }
                    i = void 0;
                    scrollTop = $win.scrollTop();
                    t = $head.length && $head.offset().top - config.topOffset;
                    if (!isFixed && headTop !== t) {
                        headTop = t;
                    }
                    if (scrollTop >= headTop && !isFixed) {
                        isFixed = 1;
                    } else {
                        if (scrollTop <= headTop && isFixed) {
                            isFixed = 0;
                        }
                    }
                    if (isFixed) {
                        return $("thead.header-copy", o).removeClass("hide");
                    } else {
                        return $("thead.header-copy", o).addClass("hide");
                    }
                };
                o = $(this);
                $win = $(window);
                $head = $("thead.header", o);
                isFixed = 0;
                headTop = $head.length && $head.offset().top - config.topOffset;
                $win.on("scroll", processScroll);

                // hack sad times - holdover until rewrite for 2.1
                $head.on("click", function () {
                    if (!isFixed) {
                        return setTimeout((function () {
                            return $win.scrollTop($win.scrollTop() - 47);
                        }), 10);
                    }
                });
                $head.clone().removeClass("header").addClass("header-copy header-fixed").appendTo(o);
                ww = [];
                o.find("thead.header > tr:first > th").each(function (i, h) {
                    return ww.push($(h).width());
                });
                $.each(ww, function (i, w) {
                    return o.find("thead.header > tr > th:eq(" + i + "), thead.header-copy > tr > th:eq(" + i + ")").css({
                        width: w
                    });
                });
                o.find("thead.header-copy").css({
                    margin: "0 auto",
                    width: o.width(),
                    "background-color": config.bgColor
                });
                return processScroll();
            });
        };
    })(jQuery);
}).call(this);
</script>

</body>
</html>
Preview