防止 div & table 向下拉伸

Question

我在div里面有一个html table。问题是，当我向表格添加元素时，表格和div 的大小会延伸到底部，但我希望大小保持固定，如果所有条目都不可见，表格应该可以滚动。我也添加了滚动，但大小仍然延伸到底部。请告诉我该怎么办？

法典：

<div class="col-sm-6" style="overflow:scroll">
                    <table id="patientsTable" class="table table-striped">
                        <c:forEach items="${patientsData}" var="pData">
                            <tr><td>${pData}</td></tr>
                        </c:forEach>
                    </table>
                </div>

Answer 1

为了使overflow生效，您还需要应用相应的width (对于overflow-x(或height (对于overflow-y(。

只需添加一个height即可使您的内容垂直滚动。

请注意，如果您只想要垂直滚动而不是水平滚动，则正在寻找overflow-y：

.col-sm-6 {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  overflow-y: scroll;
}

<div class="col-sm-6">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet nisi id sem hendrerit sagittis ut id nisl. Integer egestas arcu id congue tincidunt. Donec sit amet metus rhoncus, congue ex et, lacinia purus. Nam in nisi scelerisque, malesuada
  sapien eu, tristique quam. Aenean dapibus libero vel magna laoreet, sed ultricies lacus facilisis. Nam elit massa, congue nec gravida non, pellentesque non sem. Morbi sollicitudin sapien et arcu condimentum viverra. Ut nec purus eget orci interdum tincidunt
  a nec massa. Ut fermentum mollis rutrum. Aenean posuere justo mi, eget venenatis nibh cursus id. Donec vel nisi porttitor, sollicitudin urna nec, pharetra turpis. In sit amet odio quis mi laoreet consectetur et quis urna. Cras neque nibh, egestas in
  tincidunt eget, aliquet et nibh. In elit ipsum, pretium porta nibh at, vulputate congue purus. Sed maximus sed tortor at congue. Duis in magna vulputate, viverra nibh fermentum, tempor felis. Morbi semper ipsum magna, et lacinia elit lacinia vitae.
  Nunc dictum varius tortor. Vivamus dictum, elit vel commodo rhoncus, mi ipsum mattis mi, in pretium nunc turpis et risus. Donec luctus dolor vel ligula vehicula euismod. Phasellus ex libero, vehicula vel blandit ut, elementum in ante. In tempor neque
  ex, at tempus elit aliquam vitae. Morbi lectus lectus, finibus quis ipsum quis, maximus dapibus metus. Nullam non orci vel tortor semper porttitor vel sit amet diam. Nulla pellentesque risus sit amet magna ultricies, in euismod leo mollis. Etiam vel
  egestas diam. Suspendisse quis mi ultricies, blandit lorem id, cursus dui. Morbi rutrum dapibus quam ut tincidunt.
</div>

希望这有帮助！ :)