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中添加overflow属性

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>

如何在表格上添加滚动条？

3 个答案: