How to fix the positioning of scroll bar using css - html

Question

I have a table:- HTML Code
<div class="table-scroll">
<table class="my-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>firstName</th>
<th>lastName</th>
<th>age</th>
<th>email</th>
<th>balance</th>
<th>Mode</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection" ng-class-even="'striped'">
<td>{{row.Row1}}-{{row.Row2}}</td>
<td>{{row.Row3 != null ? row.Row3 : " "}}</td>
<td><div class="width">{{row.Row4 != null ? row.Row4 : " "}}</div></td>
<td>{{row.Row5 != null ? (row.Row2 >= "50"? row.Row5 : (row.Row5 | date:'dd-MMM-yyyy')) : " "}}</td>
<td>{{row.Row2}}</td>
<td>{{row.Row5}}</td>
</tr>
</tbody>
</table>
</div>
CSS Code:-
.table-scroll {
overflow-x: scroll;
overflow-y:hidden;
height:60vh;}
.width{
width:50%;
}
.my-table {
width: 100%; }
.my-table tbody tr {
outline: none; }
.my-table tbody, thead {
display: block; }
.my-table tbody{
overflow-y:scroll;
max-height:50vh;
}
.my-table td {
min-width: 90px;
font-size: .7em;
padding: 6px;
text-align: center;
border-bottom: 1px solid #ddd; }
.my-table th {
min-width: 90px;
background-color: #58595b;
font-size: .7em;
color: #ddd;
padding: 6px;
border-bottom: 1px solid #777;
font-weight: bold;
border-right: 1px solid #333;
border-left: 1px solid #777;
text-align: center; }
.striped {
background-color: #eeeff1; }
JS Code:-
angular.module('myApp', ['smart-table','lrDragNDrop'])
.controller('mainCtrl', ['$scope', '$timeout',
function ($scope, $timeout) {
var nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'];
var familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
$scope.isLoading = false;
$scope.rowCollection = [];
function createRandomItem() {
var
firstName = nameList[Math.floor(Math.random() * 4)],
lastName = familyName[Math.floor(Math.random() * 4)],
age = Math.floor(Math.random() * 100),
email = firstName + lastName + '#whatever.com',
balance = Math.random() * 3000;
return {
Row1: firstName,
Row2: lastName,
Row3: age,
Row4: email,
Row5: balance
};
}
$scope.columns=['Row1','Row2','Row3','Row4','Row5'];
for(var i=0;i<50;i++){
$scope.rowCollection.push(createRandomItem());
}
}
]);
https://plnkr.co/edit/YCXMSjAQ4VVSyvVFNLoI?p=preview
Here I am trying to fix the column headers and applying the vertical scroll to my tbody.
But the scroll appears at the very end when user scrolls through the horizontal scroll. I am trying to fix the position of vertical scroll but it changes my table look. Also, to achieve above I used display:block to tbody and thead but that ruins the alignment of columns. Can anybody please help me fixing the above issue.

Answer 1

.my-table tbody, thead {display: inline-block; }
.my-table th {min-width:92px;}