javascript - 将滚动条添加到表格中

我有下面的角度表代码。我只想为表格主体（除标题以外的表格行）使用垂直滚动条，该怎么办？

由于所有行都是由ng-repeat生成的。我不知道如何添加溢出样式。

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

以下是CSS内容：

.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;
}

最佳答案

尝试在行周围添加div（未经测试）：

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

和CSS（设置所需的高度）

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

关于javascript - 将滚动条添加到表格中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28350930/