Question

我有一个带有一些行的html表，这个表在HTML div中，我需要这个div总是有一个滚动。

为了做到这一点，我在div的css中设置了这两个属性：height: 400px和overflow-y: scroll，但是，正如您所知，滚动仅在表超过大小为400px。

反正是否使div总是有一个比表小一点的大小（例如，div为表的大小的90％），或者任何其他方式使div总是有滚动？

 #events_div{
   height:400px;
   overflow-y:scroll
 }

<div id="events_div">
    <table id="events_table">
        <thead>
            <th>...</th>
        </thead>
        <tbody>
            <tr>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

设置每个的最小高度值，并且应该达到你想要的效果。

Answer 2

使用JavaScript的jQuery，您可以获得表的高度，并将div设置为略小于从表中检索的宽度。确保仅在页面完全加载时运行此代码（请参阅jQuery代码）：

$(document).ready(function() {
    // put your code here
});

另一种解决方案是将表的高度设置为105％（某些值大于100）。这仅适用于围绕表格的父div具有预定义高度。

Answer 3

您需要做的就是将max-height的{{1}}设置为小于div的预计高度。因此，如果table高约300像素，请设置table div

＆＃13;

max-height: 200px;

＆＃13;

.theDiv {
  max-height: 200px;
  overflow-y: scroll;
  background: blue;
}
.theTable {
  height: 300px;
  background: black;
  color: white;
}

＆＃13;

此外，如果您不知道桌子的高度，请将<div class="theDiv"> <table class="theTable"> <tr> <th>Hello</th> </tr> <tr> <td>Hello person</td> </tr> </table> </div>设置为大于min-height高度的内容。

Div调整为表格大小

3 个答案: