"Fixed Header Scrolling Table"
Bootstrap 3.3.0 Snippet by Sentencia

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Fixed Header Scrolling Table
</h4>
</div>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td>
</tr>
<tr>
<td class="col-xs-2">4</td><td class="col-xs-8">Jim Adams</td><td>23</td>
</tr>
<tr>
<td class="col-xs-2">5</td><td class="col-xs-8">Henry Galivan</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">6</td><td class="col-xs-8">Bob Shea</td><td class="col-xs-2">26</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-width: 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

it doesn't work please help me, please kill me end my life

willycuba () - 5 years ago - Reply 0


thanks dude :*

adhiprayoga () - 7 years ago - Reply 0


https://bootsnipp.com/snippets/lV892

banwarilalpurvya (0) - 6 years ago - Reply 0


This wont work with my code because I'm using bootsrap responsive table which has more than 40 columns and it is not working on fixed header, I unable to find this thing so please help me to create something like that, and that columns will be managed as per its content

sagar vispute () - 8 years ago - Reply 0


Hi Did you get any solution, i am also looking for same

Mahesh Babu Bokkisam () - 7 years ago - Reply 0


Thanks for this snippet.

Jamiel Sharief () - 8 years ago - Reply 0


Thank you for this! I looked around for quite a while before finding this solution. It was the only one that worked for me.

Snouto () - 8 years ago - Reply 0


It seems to me that if the content in the Name column is very long, the style is messed up.

LG Optimusv () - 8 years ago - Reply 0


Try the following and see if it helps:
.table-fixed tbody td, .table-fixed thead > tr> th {
display: inline-block;
border-bottom-width: 0;
}

Aravind () - 7 years ago - Reply 0


Full CSS:
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-x: auto;
overflow-y: auto;
width: 99%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
display: inline-block;
border-bottom-width: 0;
}

Aravind () - 7 years ago - Reply 0