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-repeat. I don't know how to add overflow style.

html:

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

Following is the CSS content:

.nu-border-table{
    border: solid 1px #ccc; 
}

.nu-border{
    border: solid 1px #ccc;
}


.nu-table{
    background-color: #fff;
    padding: 5px;
    overflow: scroll;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.nu-table-row{
    display: table-row;
    position: relative;
    width: 100%;
}

.nu-table-row:hover{
    background-color: #cee6fa;
}


.nu-table-row.nu-striped.selected{
    background-color: #cee6fa;
}

.nu-table-row:last-child{
    border-bottom: none;
}

.nu-margin{
    margin:5px;
}

.nu-table-cell{
    display: table-cell;
    border-right: solid 1px #ccc;
    border-top: solid 1px #ccc;
    min-height: 2em;
    padding-top: .3em;
    position: relative;
    word-wrap: break-word;
    padding-left: 2px;
}

.nu-table-cell:last-child{
    border-right: none;
}

.nu-striped:nth-child(even) {
    background-color: #f9f9f9;
}

.nu-striped:nth-child(even):hover{
    background-color: #cee6fa;
}

.nu-header {
    background-color: #dedede;
    border-bottom: solid 2px #bebebe;
    font-weight: bold;
}

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-repeat. I don't know how to add overflow style.

html:

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

Following is the CSS content:

.nu-border-table{
    border: solid 1px #ccc; 
}

.nu-border{
    border: solid 1px #ccc;
}


.nu-table{
    background-color: #fff;
    padding: 5px;
    overflow: scroll;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.nu-table-row{
    display: table-row;
    position: relative;
    width: 100%;
}

.nu-table-row:hover{
    background-color: #cee6fa;
}


.nu-table-row.nu-striped.selected{
    background-color: #cee6fa;
}

.nu-table-row:last-child{
    border-bottom: none;
}

.nu-margin{
    margin:5px;
}

.nu-table-cell{
    display: table-cell;
    border-right: solid 1px #ccc;
    border-top: solid 1px #ccc;
    min-height: 2em;
    padding-top: .3em;
    position: relative;
    word-wrap: break-word;
    padding-left: 2px;
}

.nu-table-cell:last-child{
    border-right: none;
}

.nu-striped:nth-child(even) {
    background-color: #f9f9f9;
}

.nu-striped:nth-child(even):hover{
    background-color: #cee6fa;
}

.nu-header {
    background-color: #dedede;
    border-bottom: solid 2px #bebebe;
    font-weight: bold;
}

• javascript
• html
• css
• angularjs

• which is the "table body" that you refer to? – Stickers Commented Feb 5, 2015 at 18:18
• By "table body", I meant table rows excluding header. – Anurag Sharma Commented Feb 5, 2015 at 18:29

2 Answers 2

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

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

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 -

<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
    <div class="row">
        <div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
        <div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
        <div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
    </div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
    <div>
        <div class="row" ng-repeat="row in rows">
            <div class="col-lg-3 col-xs-3">{{row.col1}}</div>
            <div class="col-lg-6 col-xs-6">{{row.col2}}</div>
            <div class="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 (pulsory) */

        #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>