Consider utilizing the CSS property position: sticky (mdn) along with first-of-type to manage the first row (in my personal project, I typically use classes for styling, but here I'm sticking with element selectors to avoid altering your markup).
Based on your specific CSS setup, it might be beneficial to adjust the top offset on the first row for better responsiveness. For this demonstration, I've chosen a fixed height that seems to work well. Additionally, don't forget to include borders where necessary.
thead th{
position:sticky;
top:0;
background:white;
}
tbody tr:first-of-type td{
position:sticky;
top:34px;
background:white;
}
var myApp = angular.module('myApp', [])
.controller('employeeController', function($scope) {
// Angular controller code goes here
})
// Sample employee data for demonstration
var employees = [
{"Name": "Manirul Monir", "City": "Sylhet", "Country": "Bangladesh"},
// Other employee entries follow...
];
.filterdropdown{
// CSS styles for filter dropdown menu
}
.filterdropdown.active{
// Additional styling for active state of dropdown menu
}
// More CSS styles related to filtering and dropdown design
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="col-md-6" ng-app="myApp" ng-controller="employeeController">
<table class="table table-bordered table-condensed" data="{{XLfiltrate()}}">
// Table structure and headers for displaying employee data
</table>
</div>