I'm using bootstrap tables with Angular 6 in a project, and I was able to create vertical scroll table-body with this code:
<table class="table table-striped table-bordered" style="margin-bottom: 0">
<thead> <!-- Column names -->
<tr>
<th scope="col">#</th>
<th scope="col">Col 1</th>
<th scope="col">Col 2</th>
<th scope="col">Col 3</th>
...
<th scope="col">Col N</th>
</tr>
</thead>
<tbody> <!-- Data -->
<tr>
<th scope="row">1</th>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
...
<td>DDDDD</td>
</tr>
<tr>
<th scope="row">2</th>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
...
<td>DDDDD</td>
</tr>
...
<tr>
<th scope="row">n</th>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
...
<td>DDDDD</td>
</tr>
</tbody>
</table>
And css:
tbody {
display:block;
max-height:500px;
overflow-y:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
But now, if there are a lots of columns it doesn't look good.
So I wanted to add a horizontal scroll too, so I could scroll the full table horizontally and only the table body vertically. To do the horizontal scroll I used .table-responsive like this:
<div class="table-responsive">
<table class="table table-striped table-bordered" style="margin-bottom: 0">
...
</table>
</div>
But it only works without the vertical scroll part in the css.
I want to combine this two ways to scroll the table. I changed the width values on the css part, from 100% to static px values like this:
...
thead, tbody tr {
display:table;
width: 2000px;
table-layout:fixed;
}
thead {
width: calc( 2000px - 1em )
}
And it worked, but I need to set a static width and I don't know how can I do this dynamically (depending on the number of columns).