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 .

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

Thanks in advance,

Can you provide more info? What do you mean by 'the specified widths are not okay anymore and the are not vertically aligned with the .' — SW4
– SW4, Commented Nov 13, 2013 at 11:18
try min/max-width, here's your modified example:codepen.io/anon/pen/kIxnz — Sunny Sharma
– Sunny Sharma, Commented Nov 13, 2013 at 11:26

Sunny Sharma · Accepted Answer · 2013-11-13 11:22:47Z

1

Add min-width & max-width properties:

try this:

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

answered Nov 13, 2013 at 11:22

Sunny Sharma

5,0045 gold badges41 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

@Carine: I'm glad I could help... please mark it as answer so that others would get in one go :)