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

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:

  1. 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)
  2. 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.
  3. 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.