CSS Bootstrap fixed header - css

Question

Is it possible in bootstrap to create a table as:
Fixed headers and scroll-able content like here
The columns need to size proportionaly to the content of the columns (wider/smaller column depanding on content)
scroll-able x-axis if more columns that can be displayed
columns have min and max width
So far I found only a solution that would require to know the number of columns to size correctly with a flex approach like here .
table {
box-sizing: border-box;
-moz-box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
height: 500px; /* this can vary */
}
table * {
box-sizing: inherit;
-moz-box-sizing: inherit;
}
thead {
display: flex;
flex-direction: column;
align-items: stretch;
}
tbody {
overflow-y: scroll;
display: inline-block;
}
thead > tr, tbody > tr, tfoot > tr {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
thead, tfoot {
flex-shrink: 0;
}
th, tbody td {
width: 20%; /* this can vary */
overflow-x: hidden;
text-overflow: ellipsis;
display: inline-block;
}
tfoot {
display: inline-block;
}
tfoot td {
width: 100%;
display: inline-block;
}

Answer 1

Included is an example of what you might be looking for. I've included how to implement filtering and sorting as well. Keep in mind I just scrapped this together so I haven't had time to test anything, but this is roughly the idea of what you might be looking for?
HTML File:
<div class="wrapTable">
<table class="head table-bordered">
<thead>
<tr>
<td ng-click="sortType = 'id'; sortReverse = !sortReverse">
Id
<span ng-show="sortType == 'id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
</td>
<td ng-click="sortType = 'name'; sortReverse = !sortReverse">
Name
<span ng-show="sortType == 'name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
</td>
</tr>
</thead>
<tr>
<td><input ng-model="dataText.id"></td>
<td><input ng-model="dataText.name"></td>
</tr>
</table>
<div class="scrollableBody">
<table class="table table-bordered table-striped">
<tbody>
<tr ng-repeat="data in dataList | orderBy:sortType:sortReverse| filter:dataText">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$scope.sortReverse = false;
$scope.sortType = 'id'; // set the default sort type
$scope.dataText = '';
$scope.dataList=....some dynamic JSON data request
</script>
CSS File:
.wrapTable {
height: 100%;
overflow-x: auto;
}
.wrapTable table { /*set wrap for table*/
max-width: 10000px;
table-layout: fixed;
width: 100%;
display: inline-table;
}
table tr td {
margin: 0;
padding: 5px;
width: 200px; /*width of each column*/
word-wrap: break-word;
}
table.head tr td {
background: #000000;
color: white;
height: 40px;
}
.scrollableBody {
height: 550px;
min-width: inherit;
overflow-y: scroll !important;
position: absolute; /* <-- here is what is important*/
}
.scrollableBody::-webkit-scrollbar {
width: 0em;
height: 2em;
}
I forgot to mention that inside the wrapTable you can set a fix width and declare scrollable-x if needed.