Question

我正在尝试在高度为自动时滚动表格数据。但它不滚动表格数据。我希望它是滚动表而不是div。这是我的代码

<style>
table tr td{background:#ffcc00; padding:10px}
</style>

<div style="position:absolute; height:auto; min-height:200px; overflow-y:scroll; width:100%; top: 130px; left: 0px; padding-bottom:30px;">
       <table style="width:100%; height:auto">
       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

       <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

        <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

        <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

        <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

        <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

        <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

        <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

        <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

        <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

        <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

        <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

        <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>

        <tr>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       <td>fdsfd</td>
       </tr>
       </table>
    </div>

Answer 1

您已设置容器min-height，您应设置max-height

Demo

<强> HTML

<div class="table_wrapper">
    <!-- Your table goes here -->
</div>

<强> CSS

.table_wrapper {
    position:absolute; 
    height:auto;
    max-height:200px; 
    overflow-y:scroll; 
    width:100%; 
    top: 130px; 
    left: 0px; 
    padding-bottom:30px;
}

我不确定您为position: absolute;元素使用div的原因，但我认为您不需要它，但如果您因某些原因想要使用它，请考虑嵌套position: relative;容器内的元素

表格数据不在div下滚动

1 个答案: