html - 如何强制使用 CSS 显示 : table to fit within a minimum height? 制作的表格

Question

我正在使用 display: table、display: table-row 和 display: table-cell。我在表中有大量行，我正在使用 AngularJS ng-repeat 来填充这些行。这是一个只有两行的示例，但在实践中我可能有更多，我需要这些都适合 10rem 高度。

<div style=height: 10rem>
 <div style="display: table">
  <div style="display: table-row">
      <div style="display: table-cell">
      xxx
      </div>
      <div style="display: table-cell">
      xxx
      </div>
  </div>
  <div style="display: table-row">
      <div style="display: table-cell">
      xxx
      </div>
      <div style="display: table-cell">
      xxx
      </div>
  </div>
 </div>
</div>

我想限制表格(网格)的高度，并在右边有一个滚动条。然而，无论我做什么，它似乎都不会强制表格适合 <div>定义了高度。

谁能给我任何关于如何限制表格高度并显示垂直和水平滚动条的建议。

Answer 1

向容器添加overflow-x: scroll(或auto)。 (高度为 10rem 的那个。)并且 overflow-x: visible 到表格元素本身。

补充:你忘了第一行的引号:

<div style="height: 10rem">