I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table. Unfortunately the solutions I have found does not work with bootstrap or
<style>
thead, tbody
{
display: block;
}
tbody
{
overflow: auto;
height: 100px;
}
th,td
{
width: 120px;
}
</style>
<table class="table table-bordered table-striped">
<thead style="background-color:lightgreen">
<tr>
<th>Id</th><th>Name</th><th>Roll</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
</tbody>
</table>
put the table inside the div like this to make scrollable table vertically. change overflow-y
to overflow-x
to make table scrollable horizontally. just overflow
to make table scrollable both horizontal and vertical.
<div style="overflow-y: scroll;">
<table>
...
</table>
</div>
I had a lot of trouble getting the stickytableheaders library to work. Doing a bit more searching, I found floatThead is an actively maintained alternative with recent updates and better documentation.
For whatever it's worth now: I did post a solution to a sister-thread Table scroll with HTML and CSS which
visibility
, not display
) the header of the lower table and make the lower table scrollable w/in a divThe solution is agnostic to any styles / frameworks used - so maybe it's useful here as well...
A long description is in Table scroll with HTML and CSS / the code is also in this pen: https://codepen.io/sebredhh/pen/QmJvKy
<!DOCTYPE html>
<html>
<head>
<title>RoboPage</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th class="col-md-3 col-sm-3 ">First Name</th>
<th class="col-md-3 col-sm-3 ">Last Name</th>
<th class="col-md-6 col-sm-6 ">E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-3 col-sm-3">Top Row</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">johndoe@email.com</td>
</tr>
</tbody>
</table>
</div>
<script src='practice.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
thead,tbody,tr,td,th{
display:block;
}
tbody{
height:200px;
overflow-y:auto;
width: 100%;
}
thead > tr > th, tbody > tr > td{
float:left;
}
Here is the working solution:
table {
width: 100%;
}
thead, tbody, tr, td, th { display: block; }
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>
Link to jsfiddle