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

Post to Facebook Tweet this

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

Related: See More

Now UI Kit PRO
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: