表格列溢出-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制作工具提示。互联网上有很多教程。