1

我可以看到滚动条,但无法滚动 div 中的内容。

滚动条可见,但无法滚动我附上滚动条呈现方式的屏幕截图。

截图.png 在此处输入图像描述

表格截图 在此处输入图像描述

<div style="height:auto;width:777px;overflow:hidden;margin-left:0px;" id="ios_mdata" class="contentHolder">
    <table class="table table-bordered table-hover table-condensed"  style="margin-left:23px;">
        <thead>
            <tr>
                <th>Version</th>
                <th>App Type</th>
                <th>File Size(MB)</th>
                <th>Release Date</th>
                <th>Minimum OS</th>
                <th>Avg. User Rating</th>
                <th>User Rating Count</th>
                <th>Last Updated</th>
                <th>View in Store</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>5.3</td>
              <td>universal</td>
              <td>12382700.0</td>
              <td>2010-11-05</td>
              <td>7.0</td>
              <td>2</td>
              <td>2</td>
              <td>2015-08-03</td>
              <td>link</td> 
            </tr>
        </tbody>
    </table>
</div>
<style type="text/css">
  .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
  .contentHolder .content { width: 1280px; height: 620px; }
  .table { width: 1200px; }
  .spacer { text-align:center }
  .table-bordered {
    border-collapse: collapse;
  }
</style>
<script type="text/javascript">
    $("#ios_mdata").perfectScrollbar()
</script>
4

4 回答 4

1

我遇到了类似的问题。这是我发现的工作:

<div class="scroller" style="overflow-y: auto; overflow-x:hidden; position: relative; height: 340px"> <table>...</table> </div>

然后调用Javascript:

$('.scroller').perfectScrollbar();
于 2016-06-22T20:25:06.000 回答
0

那是因为你已经overflow:hidden;摆在桌子上了。

http://www.w3schools.com/cssref/pr_pos_overflow.asp

删除此样式规则,溢出将恢复为默认值auto,您将恢复正常工作的滚动条。

于 2015-08-05T08:31:25.887 回答
0
**Use two tables**
    1. Table for table header
    2. Table for table body
    
This is the best way of creating table with scrollable body having perfect scroll or any other type of custom scroll.

<div>
   <div>
      <p-table>
         <ng-template pTemplate="header">
            <tr>
               <th>Column 1</th>
               <th>Column 2</th>
               <th>Column 3</th>            
            </tr>
         </ng-template>
      </p-table>
   </div>
   <perfect-scrollbar>
      <div style="max-height: 300px;">
         <p-table [value]="tableData">
            <ng-template pTemplate="body" let-tableData>
               <tr>
                  <td>tableData.id</td>
                  <td>tableData.firstName</td>
                  <td>tableData.lastName</td>
               </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage" let-columns>
               <tr>
                  <td class="text-align-center" colspan="3">
                     <div>Loading data.. Please wait...</div>
                  </td>
               </tr>
            </ng-template>
         </p-table>
      </div>
   </perfect-scrollbar>
</div>
于 2021-01-29T09:41:21.483 回答
0

很难弄清楚你的答案,但这似乎是一个设计问题。开发人员抱怨使用溢出属性经常会导致滚动条动作异常。尽量避免使用溢出属性。

于 2015-08-04T15:25:29.123 回答