Hibased upon below urlScrollable HTML Table with Fixed Header using CSS in AngularJSI am going to implement scrollable code in my belowhere not working properlyCould you please help me Layout nulllthtmlgtltheadgt lttitlegtIndexlttitlegt ltlink rel34stylesheet34 href34httpscdnjscloudflarecomajaxlibstwitterbootstrap337cssbootstrapmincss34 gt ltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxl

Hi mahesh213mahesh213 saysltdiv classtableresponsive gt Remove class from divCheck the below codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtIndexlttitlegt ltlink rel34stylesheet34 href34httpscdnjscloudflarecomajaxlibstwitterbootstrap337cssbootstrapmincss34 gt ltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsangularjs155angularjs34gtltscriptgt ltstyle type34textcss34gt dvItems table thead tbody display block dvItems tbody position absolute height 150px overflowy scroll dvItems td th minwidth 100px important height 25px important overflow hidden important textoverflow ellipsis important maxwidth 100px important

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

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Nov 05, 2019 11:39 PM
Forum: AngularJS
Answer: 1
Views: 3774
Sample Code: Download

Hi,

based upon below url

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>

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Nov 06, 2019 05:58 AM
Report

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

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

Scrollable HTML Table with Fixed Header using CSS in AngularJS

Company

Explore

Follow us

Contact Us