0

this question may be duplicate but I did not got solution for my requirement. I need a help to have fixed/freeze header and few first columns for table inside the scrollable div element. The data is dynamic as i columns and rows may increase or decrease depends of Data source. Currently it having ~86 rows and ~55 columns. The columns width is dynamic based on data.

My HTML code looks as below.

<html>
<body ng-app="myapp" ng-controller="mycontroller">
    <table style="width:100%; height:90%">
        <tr>
            <td width=3%> </td>
            <td>
                <table style="width:100%;">
                    <tr>
                        <td>Page header</td>
                    </tr>
                    <tr><td></td></tr>
                </table>

                <table style="width:100%; height:90%">
                    <tr>
                        <td>
                            <div ng-style="{'width': twidth + 'px', 'heigth':theight + 'px','overflow-x': 'auto','overflow-y': 'auto'}">
                                <table>
                                    <thead ng-repeat="h in dummy| limitTo:1">
                                        <tr>
                                            <th ng-repeat="(key, val) in h">
                                                {{key}}
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="h in dummy">
                                            <td ng-repeat="(key, val) in h">{{val}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
Ravi
  • 194
  • 1
  • 14
  • A few questions: 1 - what have you tried? You need to share it with us, otherwise this question will get closed. 2 - You've tagged with "angularjs" - why? There's no angular code here. 3 - Your question is unclear. Do you want this done with CSS? javascript? Other? 4 - show us the relevant bits - css or javascript - so we have something to work with. – random_user_name Aug 18 '16 at 17:33
  • @cale_b here is few links which i have tried. http://stackoverflow.com/questions/19559197/how-to-make-scrollable-table-with-fixed-headers-using-css https://eureka.ykyuen.info/2013/04/08/jquery-freeze-html-table-header-and-the-left-columns/ http://jsfiddle.net/At8L8/ http://jsfiddle.net/DJqPf/7/ http://jsfiddle.net/sckq8/10/ https://jsfiddle.net/dPixie/byB9d/3/ http://salzerdesign.com/test/fixedTable.html I fetching the data from angular, so I have tagged it. I want fixed header and fixed few left columns either in CSS or Javascript – Ravi Aug 18 '16 at 17:49

0 Answers0