表列溢出-y：滚动同时让溢出-x 自动/可见

Question

我有一个有两列的表。我希望第一列是可滚动的，这样我的表格就可以保持在一个固定的高度而不是连续扩展。我只希望它可以垂直滚动：水平溢出的部分应该仍然可见（在我的情况下，溢出的部分是悬停工具提示，它们被隐藏并添加一个水平滚动条......），而不必水平滚动.我的 CSS/HTML 如下所示：

<table class"tab1">
    <td class="td1"><div class="container"><!-- Many, many, many floating elements here --></div></td>
    <td></td>
</table>

CSS：

.tab1 {
    table-layout: fixed;
    width: 100% /*100% of the parent node*/
    height: 20em;
}
.td1.container {
    overflow-y: scroll;
}

2 个问题：

• 20em 的高度被忽略。即使第一列现在有了滚动条，它仍然可以根据自己的需要进行扩展。
• 当将鼠标悬停在我的一个元素上时，它会生成一个带有position:absolute 的 div，会出现一个水平滚动条，并且溢出的工具提示部分会被隐藏。

我该如何解决这个问题？

PS：代码当然是简化了，但我希望它仍然能很好地说明我的问题。

PPS：这是一个 JSFiddle：jsfiddle.net/pg0cLpjd

Answer 1

这个问题比我想象的还要难……
但这里有一个部分解决方案：

• table-layout: fixed; 仅适用于表本身及其列；不是高度。表格将始终随着其内容而增长。但是有几个解决方法：

  1. 将您的表格设置为display: block;，为其指定高度并设置其overflow-y: scroll;（这也可能解决您的第二个问题，具体取决于您的需要）
  2. 在桌子周围放置一个指定高度的 div 并设置overflow-y: scroll;。表格仍在 div 内增长，但您有一个滚动条。
  3. 在指定高度的列中放置div，并设置overflow-y: scroll;。这与第一次尝试的不同之处仅在于滚动条的位置，您可以独立滚动每个单元格。但这有一个巨大的缺点，我现在要解释一下：

• 正如this answer 所说：如果您将一个溢出方向设置为visible 以外的其他值，则另一个溢出方向将自动设置为auto。 （这是一项功能，而不是错误）。而这正是第二个问题所在。您的代码具有正确的逻辑，但这是不可能的。有使用包装 div 的解决方案，（它对我不起作用）但你可以试一试。
  我建议看看如何使用 JavaScript 制作工具提示。网上有很多教程。