scrollable table + overflow-x

Question

I am currently testing multiple behaviors of the element and one is particularly challenging.

Objective: prepare a table with a fixed and a with a fixed height and scroll-y. (this has been done)

Limitation: the table is huge and extends out of the browser window (therefore only visible by scrolling horizontally in the browser).

The issue: when the table extends out of the browser window, the specified widths are not okay anymore and the are not vertically aligned with the .

Exemple here : http://codepen.io/Carine/pen/xqKDa

What do you think? Have you encountered this problem before?

Thanks in advance,

Answer 1

Add min-width & max-width properties:

try this:

th, td {
  width: 160px;
  max-width:160px;
  min-width:160px;  
}