Как добавить полосу прокрутки на стол?

Question

Я пытаюсь добавить полосу прокрутки на свой стол, но ее не видно на столе. Я попытался поставить свою таблицу в div. Вот мой код:

<table class="table-condensed table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important; position: absolute;left: 52px;Top:100px"> 
    <thead> 
     <tr> 
      <th>Eligibility Reports</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <img src="images/reports.png" class="icon" style="margin: 1px;" /> 
       <a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a> 
       <br/> 
       <p align="left">This report provides a list of SR IDs where<br/> duplicated or overlapping coverage is present.</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <img src="images/reports.png" class="icon" style="margin: 1px;" /> 
       <a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a> 
       <br /> 
       <p align="left">This report provides a list of Open Batches<br/> for a given date range by Batch Type.</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <img src="images/reports.png" class="icon" style="margin: 1px;" /> 
       <a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a> 
       <br /> 
       <p align="left">This report provides a list of Refund Details<br/> for a given Bid Year and Client Number.</p> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Я пытался поставить перепускной свойство в CSS

Answer 1

Вы должны сделать две вещи. Во-первых, вы должны обернуть таблицу в контейнер, который будет делать скроллинг, как это:

<div style="height: 200px; overflow: auto;"> 
    <table> 
     ... 
    </table> 
</div> 

И вы должны удалить position: absolute из стиля таблицы.

Вот пример: http://jsfiddle.net/qbkfbrwd/

Надежда, что помогает!

Редактировать Если вместо этого вы хотите только тело таблицы, чтобы иметь возможность прокрутки, это так просто, как добавить следующий CSS:

tbody { 
    display: block; 
    height: 200px; //or whatever you want the height to be 
    overflow: auto; 
} 

Пример: http://jsfiddle.net/f91pzj6d/

Answer 2

Создать DIV с :

<div id="myTable"> 

и в CSS:

myTable {  
    overflow:auto; 
} 

Answer 3

Я добавляю div в качестве контейнера и использую overflow: auto. Вы должны также установить height для вашего стола:

#tableContainer { 
 
    overflow: auto; 
 
    height: 200px; 
 
    position: relative; 
 
    width: 300px; 
 
}

<div id="tableContainer"> 
 
    <table class="table-condensed table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important; position: absolute;left: 52px;Top:100px"> 
 

 
    <thead> 
 
     <tr> 
 
     <th>Eligibility Reports</th> 
 
     </tr> 
 

 
    </thead> 
 

 

 
    <tbody> 
 

 
     <tr> 
 
     <td> 
 
      <img src="images/reports.png" class="icon" style="margin: 1px;" /> 
 
      <a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a> 
 
      <br/> 
 
      <p align="left">This report provides a list of SR IDs where 
 
      <br/>duplicated or overlapping coverage is present.</p> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <img src="images/reports.png" class="icon" style="margin: 1px;" /> 
 
      <a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a> 
 
      <br /> 
 
      <p align="left">This report provides a list of Open Batches 
 
      <br/>for a given date range by Batch Type.</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <img src="images/reports.png" class="icon" style="margin: 1px;" /> 
 
      <a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a> 
 
      <br /> 
 
      <p align="left">This report provides a list of Refund Details 
 
      <br/>for a given Bid Year and Client Number.</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <img src="images/reports.png" class="icon" style="margin: 1px;" /> 
 
      <a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a> 
 
      <br /> 
 
      <p align="left">This report provides a list of Refund Details 
 
      <br/>for a given Bid Year and Client Number.</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <img src="images/reports.png" class="icon" style="margin: 1px;" /> 
 
      <a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a> 
 
      <br /> 
 
      <p align="left">This report provides a list of Refund Details 
 
      <br/>for a given Bid Year and Client Number.</p> 
 
     </td> 
 
     </tr> 
 

 
    </tbody> 
 
    </table> 
 
</div>