CSS oddness controlling the width of a table

[java...@gmail.com]

Hey there,

I have a HandsonTable instance in a working webapp, but I'm having a hard time styling it. In particular, I want the table to be narrower, perhaps with a (horizontal) scrollbar when it's too wide. My initial thought was:

#myDiv{
width: 50%;
overflow: scroll;
margin: auto;
}

This is the div Handson enhances. Now, the weird thing is that this worked great in Chrome Dev tools. However, when I add this to the CSS file, I don't see *anything*. If I disable (in dev tools) "overflow:scroll" then I see a table header, otherwise, nothing. It's almost like the layout is being affected by the fact that Handson hasn't had a chance to build up the DOM yet.

I would normally make a jsfiddle (or jsbin, my preference) but I can't seem to reproduce it, which tells me that it has something to do with the surrounding DOM. But I figured I'd ask here in case there's any one who knows before breaking down the page further. :)

- Josh

[java...@gmail.com]

On Monday, July 13, 2015 at 6:19:59 PM UTC-7, java...@gmail.com wrote:
> I would normally make a jsfiddle (or jsbin, my preference) but I can't seem to reproduce it

Actually, I think I can! http://jsfiddle.net/vp2qh4ej/

So it seems like if you nest a hansontable in another table (e.g. for old school layout purposes, which is sometimes beyond our control) it doesn't layout properly. Is there something I can do to make this work?

Great thanks in advance,
Josh