[Solved] Scrollable HTML Table with Fixed Header not working in AngularJS

Last Reply 12 days ago By dharmendr

Posted 12 days ago

Hi,

based upon below url

Scrollable HTML Table with Fixed Header using CSS in AngularJS

I am going to implement scrollable code in my below

here not working properly

Could you please help me

@{
    Layout = null;
}

<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <style type="text/css">
        #dvItems table, thead, tbody {
            display: block;
        }

        #dvItems tbody {
            position: absolute;
            height: 150px;
            overflow-y: scroll;
        }

        #dvItems td, th {
            min-width: 100px !important;
            height: 25px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            max-width: 100px !important;
        }

        #dvItems .table-bordered {
            border: 0px solid #ddd !important;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller("MyController", ['$scope', '$http', function ($scope, $http) {
         
            $scope.Employees = [
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' }
            ];          
        } ]);
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="container">
        <br />
        <div id="dvItems" >
            <div class="container" style="position: fixed; height: 200px; overflow-x: scroll;
            overflow-y: hidden">
                <div class="table-responsive ">
                    <table border="0" cellspacing="0" cellpadding="0" ng-show="(Employees).length>0"
                           id="dvData" class="table table-bordered table-hover table-striped" style="height: 200px;">
                        <thead>
                            <tr class="success">
                                <th ng-repeat="(header, value) in Employees[0]">{{header}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="row in Employees">
                                <td ng-repeat="cell in row">{{cell}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                </div>
            </div>
    </div>
    <br />
    <a href="#" class="btn btn-danger btn-sm" ng-click="printToCart('dvContainer1')">Export PDF</a>
</body>
</html>
You are viewing reply posted by: dharmendr 12 days ago.
Posted 12 days ago

Hi mahesh213,

mahesh213 says:
<div class="table-responsive ">

 Remove class from div.

Check the below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <style type="text/css">
        #dvItems table, thead, tbody
        {
            display: block;
        }
        #dvItems tbody
        {
            position: absolute;
            height: 150px;
            overflow-y: scroll;
        }
        #dvItems td, th
        {
            min-width: 100px !important;
            height: 25px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            max-width: 100px !important;
        }
        #dvItems .table-bordered
        {
            border: 0px solid #ddd !important;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function ($scope) {
            $scope.Employees = [
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' },
                { EmpName: 'aaa', FatherName: 'ssss', DOB: '5/1/2019', DOJ: '02/01/2018', Amt: '19350', EmpName1: 'aaa', FatherName1: 'ssss', DOB1: '5/1/2019', DOJ1: '02/01/2018', Amt1: '19350', EmpName2: 'aaa', FatherName2: 'ssss', DOB2: '5/1/2019', DOJ2: '02/01/2018', Amt2: '19350' }
            ];
        });        
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="container">
        <div id="dvItems">
            <div class="container" style="position: fixed; height: 200px; overflow-x: scroll;
                overflow-y: hidden">
                <div >
                    <table id="dvData" ng-show="(Employees).length>0" class="table table-bordered table-hover table-striped" 
                        style="height: 200px;">
                        <thead>
                            <tr class="success">
                                <th ng-repeat="(header, value) in Employees[0]">
                                    {{header}}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="row in Employees">
                                <td ng-repeat="cell in row">
                                    {{cell}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Demo