Table-column overflow-y: scroll while letting overflow-x be auto/visible - html

Question

I have a table with two columns. I want the first column to be scrollable, so that my table can stay at a fixed height and not expand continuously. I only want it to be scrollable vertically though: Horizontally the overflowing parts should still be visible (In my case, the overflowing parts are on-hover tooltips which are getting hidden and add a horizontal scrollbar...), without having to scroll horizontally. My CSS/HTML looks like this:
<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 Problems:
The height of 20em gets ignored. Even though the first column now gets a scrollbar, it still expands to its own needs.
When hovering over one of my elements, which generates a div with position:absolute, a horizontal scrollbar appears and the part of the tooltip that overflows gets hidden.
How can I fix this?
PS: The code is simplified of course, but I hope that it still illustrates my problem well.
PPS: Here is a JSFiddle: jsfiddle.net/pg0cLpjd

Answer 1

This question is even more difficult than I thought...
But here is a partial solution:
table-layout: fixed; only applies to the table itself and its columns; not the height. A table will always grow with its content. But there are a couple workarounds:
Set your table to display: block;, give it a specified height and set its overflow-y: scroll; (This also might solve your second problem, depending on your needs)
Place a div with a specified height around your table and set overflow-y: scroll;. The table still grows inside the div but you have a scrollbar.
Place a div in your columns with a specified height and set overflow-y: scroll;. This differs from the first attempt only in the position of the scrollbars and you can scroll every cell independently. But this has one huge disadvantage, which I am going to explain now:
As this answer says: If you set one overflow direction to something else than visible, the other overflow direction will automatically set to auto. (it's a feature, not a bug). And this is exactly where the second problem lies. Your code has the right logic, but it's just not possible. There are solutions using a wrapper div, (it didn't work for me) but you could give it a try.
I'd recommend having a look on how to make tooltips with JavaScript. There are plenty tutorials out there on the internet.