Bootstrap Snippet FIxed Header Table/ Scroll Table Body using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h2>FIxed Header Table/ Scroll Table Body</h2>
        
        <table class="points_table">
            <thead>
                <tr>
                    <th class="col-xs-1">#</th>
                    <th class="col-xs-7">Team</th>
                    <th class="col-xs-1">S</th>
                    <th class="col-xs-1">M</th>
                    <th class="col-xs-1">L</th>
                    <th class="col-xs-1">O</th>
                </tr>
            </thead>
            <tbody class="points_table_scrollbar">
                <tr class="odd">
                    <td class="col-xs-1">1</td>
                    <td class="col-xs-7">Test Points</td>
                    <td class="col-xs-1">10</td>
                    <td class="col-xs-1">0</td>
                    <td class="col-xs-1">5</td>
                    <td class="col-xs-1">1</td>
                </tr>
                <tr class="even">
                    <td class="col-xs-1">2</td>
                    <td class="col-xs-7">Test Points 2</td>
                    <td class="col-xs-1">10</td>
                    <td class="col-xs-1">0</td>
                    <td class="col-xs-1">5</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.points_table thead {
    width: 100%;
}
.points_table tbody {
    height: 562px;
    overflow-y: auto;
    width: 100%;
}
.points_table thead tr{
    width: 99%;
}
 .points_table tr{
    width: 100%;
 }
.points_table thead, .points_table tbody, .points_table tr, .points_table td, .points_table th{
    display: inline-block;
}
.points_table thead{
    background: #d91f2d;
    color: #fff;
}
.points_table tbody td, .points_table thead > tr> th{
    float: left;
    border-bottom-width: 0;
}
.points_table>tbody>tr>td, .points_table>tbody>tr>th, .points_table>tfoot>tr>td, .points_table>tfoot>tr>th, .points_table>thead>tr>td, .points_table>thead>tr>th{
    padding: 8px;
    height: 50px;
    text-align: center;
    line-height: 32px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"FIxed Header Table/ Scroll Table Body"
Bootstrap 3.0.0 Snippet by ubedattar

Related: See More

Questions / Comments:

"FIxed Header Table/ Scroll Table Body" Bootstrap 3.0.0 Snippet by ubedattar

Related: See More

Questions / Comments:

"FIxed Header Table/ Scroll Table Body"
Bootstrap 3.0.0 Snippet by ubedattar