Chris
Reputation: 125
Table with fixed header and scrolling table body doesn't let tbody scroll
I have a bootstrap v.4 table and want to have a fixed header with a scrolling table body. The Size of the table should remain at all time lets say 100px in height and width = auto.
This currently does not work with the code i have attached.
It is supposed to be dedicated to this single table, and should not interfere with all other tables i might use in a different area, so i had assigned a class already, not sure if this is correct.
jQuery(document).ready(function($) {
$('#reservationTable tr').each(function () {
var td_value = $('td',this).eq(4).text();
console.log(td_value);
switch (td_value) {
case 'Expected':
$(this).addClass('table-success');
break;
case 'Inhouse':
$(this).addClass('table-info');
break;
case 'Cancelled':
$(this).addClass('table-danger');
break;
case 'Partial':
$(this).addClass('table-warning');
break;
case 'Finished':
$(this).addClass('table-active');
break;
default:
// statements_def
break;
}
});
});@media screen and (min-width: 699px) {
table-scrollTBody {
display: block;
height: 300px;
overflow: auto;
}
scrollTBody {
display: block;
height: 200px;
overflow: auto;
}
table-scrollTBodyThead, scrollTBody tr, table-scrollTBodyThead tr {
display: table;
width: 100%;
table-layout: fixed;
}
scrollTD {
word-wrap: break-word;
}
}
@media screen and (max-width: 700px) {
table-scrollTBody {
display: block;
height: 250px;
overflow: auto;
}
scrollTBody {
display: block;
height: 200px;
overflow: auto;
}
table-scrollTBodyThead, scrollTBody tr, table-scrollTBodyThead tr {
display: table;
table-layout: fixed;
}
scrollTD {
word-wrap: break-word;
}
}<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="" id="reservationListTable">
<div class="row">
<div class="col-md-12">
<div class="input-daterange input-group sandbox-container" style="margin-top:0.5em" id="datepicker">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
</div>
</div>
<input style="margin-top:0.5em" class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation..">
<table class="table table-responsive table-fixed table-scrollTBody" id="reservationTable">
<thead class="table-scrollTBodyThead">
<tr class="header">
<th style="width:40%;">Name</th>
<th style="width:10%;">Cabin</th>
<th style="width:10%;">Guests</th>
<th style="width:10%;">Table</th>
<th class="hidden-xs-down" style="width:10%;">Status</th>
<th class="hidden-xs-down" style="width:5%;">SR</th>
<th class="hidden-xs-down" style="width:5%;">DOB</th>
<th style="width:10%;">Action</th>
</tr>
</thead>
<tbody class="scrollTBody">
<tr class="">
<td class="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Expected</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Expected</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Cancelled</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Finished</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Inhouse</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Partial</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Expected</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Upvotes: 0
Views: 6034
Answers (2)
Lucian Minea
Reputation: 1336
The simplest way to do it, with other css implemented, is to use two tables, one just for the header, the other for the body, with scroll. Something like this :
<table class="table tex-sm">
<thead class="thead-dark">
<tr>
<th>Data</th>
<th>Nume</th>
<th>Document</th>
<th>Optiuni</th>
</tr>
</thead>
</table>
<div class="list-container-h30 scrolled-y">
<table class="table table-striped table-hover text-sm">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
Needless to say that the div containing the second table has fixed height, in this case, 30%, and scroll just for the Y axe.
This is what I'm using and it's the simplest and effective setup anyone can do.
Upvotes: 0
Nayana_Das
Reputation: 1817
Try this:
.table-fixed{
width: 100%;
background-color: #f3f3f3;
tbody{
height:200px;
overflow-y:auto;
width: 100%;
}
thead,tbody,tr,td,th{
display:block;
}
tbody{
td{
float:left;
}
}
thead {
tr{
th{
float:left;
background-color: #f39c12;
border-color:#e67e22;
}
}
}
}
HTML code:
<div class="container">
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-3">First Name</th>
<th class="col-xs-3">Last Name</th>
<th class="col-xs-6">E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">[email protected]</td>
</tr>
</tbody>
</table>
</div>
Please check out the CodePen : https://codepen.io/anon/pen/OpVORa
Upvotes: 1
Related Questions
- Table fixed header and scrollable body
- How can I make a table body scroll?
- Fixed table header with horizontal AND vertical scrolling body
- Fixed header scrolling table with multiple tbody elements
- Make table header fixed when scrolling
- Make the bootstrap table scroll-able vertically and horizontally with fixed header
- Bootstrap table with fixed header and no scroll on body
- Table header to be fixed using bootstrap and scrollable content
- Bootstrap fixed nested table header on scroll
- HTML scrollable table header and body alignment