Question

我在table内有一个html div。问题是，当我向表中添加元素时，表和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 （对于 {{3} } ）或 overflow-x （对于 height ）。

只需添加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>

希望这有帮助！：）

防止div＆amp;从伸展的桌子

1 个答案: