将角度添加到表中的滚动条

Question

我有以下代码表中的角度。我只需要一个垂直滚动条用于表格主体（不包括表头的表格行）我该怎么做？

由于所有行都是由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; 
} 

Answer 1

尝试添加一个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; 
} 

Answer 2

您可以放置​​两个div，其中1st div（Header）将具有透明滚动条，2nd div将具有可见/自动滚动条的数据。示例包含用于循环数据的角码代码片段。

下面的代码为我工作 -

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

其他风格头隐藏滚动条 -

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