Add Scrollbar To Table In Angular

I have following code for table in angular. I want a vertical scroll bar only for table body (table rows excluding header) how can I do that? Since All rows are generated by ng-rep

Solution 1:

Try to add a div around the rows (not tested):

<divclass="nu-table"><divclass="nu-table-row nu-header"><divclass="nu-table-cell">A</div><divclass="nu-table-cell"style="width: 33%">B</div><divclass="nu-table-cell"style="width: 34%">C</div></div><divclass="nu-table-body"><divclass="nu-table-row nu-striped pointer-cursor"ng-repeat=" map in mapList"><divclass="nu-table-cell"ng-bind="map.A"></div><divclass="nu-table-cell">{{map.B}}</div><divclass="nu-table-cell"ng-bind="map.C"></div></div></div></div>

and css (set the height you want)

.nu-table-body {
    overflow-y:auto;
    max-height:500px;
}

Solution 2:

You can place two div where 1st div (Header) will have transparent scroll bar and 2nd div will be have data with visible/auto scroll bar. Sample has angular code snippet for looping through the data.

Below code worked for me -

<divid="transparentScrollbarDiv"class="container-fluid"style="overflow-y: scroll;"><divclass="row"><divclass="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div><divclass="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div><divclass="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div></div></div><divclass="container-fluid"style="height: 150px; overflow-y: auto"><div><divclass="row"ng-repeat="row in rows"><divclass="col-lg-3 col-xs-3">{{row.col1}}</div><divclass="col-lg-6 col-xs-6">{{row.col2}}</div><divclass="col-lg-3 col-xs-3">{{row.col3}}</div></div></div></div>

Additional style to hide header scroll bar -

<style>#transparentScrollbarDiv::-webkit-scrollbar {
            width: inherit;
        }

        /* this targets the default scrollbar (compulsory) */#transparentScrollbarDiv::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* the new scrollbar will have a flat appearance with the set background color */#transparentScrollbarDiv::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        /* this will style the thumb, ignoring the track */#transparentScrollbarDiv::-webkit-scrollbar-button {
            background-color: transparent;
        }

        /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */#transparentScrollbarDiv::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */</style>