如何让一列定义 table 的高度，而另一列总是有滚动条？

Question

我手头有这个问题：

我有两列 table。我希望左栏为：

定义整体的高度table
AND 同时最小高度为 300px

第二列的行数会比左列多很多，但它既不会溢出也不会扩展整个 table（因为 table 的高度应该由左列和右列定义列必须从不扩展列的高度。

所以基本上，如果第一列内容很小（假设是两行），table 的高度将为 300px，而右列内容将有滚动条，因为其内容高度超过 300px。

现在您下次加载同一页面时，第一列的行数会更多，因此它们的高度会超过 300 像素。 table 的高度现在会变大，与左栏的内容一样大（因此左栏永远不会有滚动条），右栏将再次具有适当的大小（与左栏相同) 但它的内容将再次被修剪，并且该列将有滚动条以查看右列的其余部分。

任何人都可以帮助我或指出正确的方向吗？我已经花了两个小时在谷歌上搜索和尝试一些东西，但就是无法正常工作。此外，它不必仅通过 table 来实现。只是 divs 也可以。我只需要两个相邻的文本块，父级的 100% 宽度 div 和左列设置的高度（同时不小于 300px）。

Answer 1

这是一个工作示例（根据您的需要进行调整）https://jsfiddle.net/aymckoLt/22/

我的解决方案在 2 列中使用 table 和 div：

<table border=1>
  <tr>
    <td>
      <div> <!-- actually this div is unnecessary  -->
        <!-- add some of lines -->
      </div>
    </td>
    <td style="height:300px">
      <div style="height: 100%;overflow-y: auto;">
        <!-- add a bunch of lines -->
      </div>
    </td>
  </tr>
</table>

希望能满足您的要求。
后期编辑
试图解释发生了什么......

设置右栏的高度"fixed"当左栏的内容小于该高度时起到"min-height"的作用，同时给出"boundary box" 为 100% 的 div 溢出。
当左列的内容没有 boundaries/limits 时，它占据的高度超过了使单元格 (td) 扩展的高度，并随之扩展了右列中的单元格（种类覆盖指定的高度），最重要的是它被 div

或者更简单地说...它是 table(s) 的 "magic"。

如何让一列定义 table 的高度，而另一列总是有滚动条？

How to make one column define table's height while the other will always have scrollbar?

html

css

css-tables