Bootstrap scrollable table with fixed header - html

Question

I want to create a table with a lot of data. To keep it all sorted out, I want the table to be scrollable. I use bootstrap to pimp up the table.
I know this question is asked before and the solution does work for me, but my table is a mess. See the table on the right for what it looks like. I want it to look more like the table to the left.
So what I tried is:
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Speciale tarieven buiten 's-Herogenbosch</h3>
<div class="pull-right">
<span class="clickable filter" data-toggle="tooltip" title="Klik om te zoeken"
data-container="body">
<i class="glyphicon glyphicon-search"></i>
</span>
</div>
</div>
<div class="panel-body">
<input type="text" class="form-control" id="task-table-filter" data-action="filter"
data-filters="#task-table" placeholder="Zoek naar een plaats.."/>
</div>
<table class="table table-hover table-fixed" id="task-table">
<thead>
<tr>
<th >#</th>
<th>Van</th>
<th>Naar</th>
<th>Normaal</th>
<th>Onze prijs</th>
<th>Korting</th>
</tr>
</thead>
<tbody class="alignmentp">
<tr>
<td>1</td>
<td>'s-Hertogenbosch</td>
<td>Ammerzoden</td>
<td>€ 35,00-</td>
<td>€ 24,99-</td>
<td>30 %</td>
</tr>
<tr>
<td>2</td>
//etc etc
</tr>
</tbody>
</table>
</div>
And the CSS I use with this is:
.alignmentp{
text-align: left !important;
}
.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;
}
I can fix this table by manually correcting the width and height of each <"tr"> and <"td"> element, but there must be a better way of doing this..

Answer 1

Sounds like you are having problems with your columns not lining up. What you could do is find out how wide your widest element is (<td> or <th>) and then set all <td> and <th> elements to that width.
Another possible solution is to add the table-responsive class to your table, as defined in the Bootstrap table docs, and make the width of your <td> and <th> elements be defined by how many there are in a row. If there are five <td>s in a <tr>, set the width of the <td>s to be 20%.
Hope this fixed your problem, if not, just comment below and I'll try again.

Answer 2

.fixHeader{
overflow-y: auto;
}
.fixHeader th {
position: sticky;
top: 0;
background-color: #b4bab4;
}
.fixHeader table {
border-collapse: collapse;
width: 100%;
}
.fixHeader th,
.fixHeader td {
padding: 8px 16px;
}
<div class="fixHeader" style="height:200px;">
<table class="table card-border">
<thead class="tableHead">
<tr>
<th scope="col">
<label class="form-check-label">xyz</label>
</th>
<th scope="col"> abc</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of listData">
<td>
<div class="form-check">
{{item.Name}}
</div>
</td>
<td>
<label class="form-check-label">{{ item.Value }}</label>
</td>
</tr>
</tbody>
</table>
</div>

Answer 3

You can check this answer it was helpful for me.
In HTML you can add this:
<div class="panel panel-default">
<div class="panel-body">
<table id="myTable" class="table table-hover table-fixedheader table-bordered table-striped">
<thead>
<tr>
<th width="15%">Column1Column1Column1Column1</th>
<th width="15%">Column2</th>
<th width="15%">Column3</th>
<th width="15%">Column4</th>
<th width="40%">Column5</th>
</tr>
</thead>
<tbody style="height:110px">
<tr>
<td width="15%">aaaaaaaaaaa</td>
<td width="15%">bbbbbbbbbbb</td>
<td width="15%">ccccccccccc</td>
<td width="15%">ddddddddddd</td>
<td width="40%">eeeeeeeeeee</td>
</tr>
</tbody>
</table>
</div>
</div>
In your CSS add this link:
table.table-fixedheader {
width: 100%;
}
table.table-fixedheader, table.table-fixedheader>thead, table.table-fixedheader>tbody, table.table-fixedheader>thead>tr, table.table-fixedheader>tbody>tr, table.table-fixedheader>thead>tr>th, table.table-fixedheader>tbody>td {
display: block;
}
table.table-fixedheader>thead>tr:after, table.table-fixedheader>tbody>tr:after {
content:' ';
display: block;
visibility: hidden;
clear: both;
}
table.table-fixedheader>tbody {
overflow-y: scroll;
height: 100px;
}
table.table-fixedheader>thead {
overflow-y: scroll;
}
table.table-fixedheader>thead::-webkit-scrollbar {
background-color: inherit;
}
table.table-fixedheader>thead>tr>th:after, table.table-fixedheader>tbody>tr>td:after {
content:' ';
display: table-cell;
visibility: hidden;
clear: both;
}
table.table-fixedheader>thead tr th, table.table-fixedheader>tbody tr td {
float: left;
word-wrap:break-word;
}