Interesting Behavior of the Google Visualization Table
I had to do some work today with the Google Visualization Table and no matter how I set it up, if I had more rows in the table than would fit in the vertical space allowed in the enclosing div, we'd have a vertical scrollbar and a horizontal one.
I kept fiddling with the width of the div and the width in the table's parameters, and nothing seemed to make any difference. Then I started to see a pattern: the horizontal scroll bar was there only when the vertical scrollbar was - and it was always scrolling only the width of the vertical scrollbar.
It was as if the vertical scrollbar's width was not being taken into account in the sizing of the table, and therefore, a horizontal scrollbar was needed to display it all.
So how to fix it?
Not so easy, it seems.
It's a known bug by Google, but they have not yet released a fix. Nice.
I started playing around with the width parameter in the table's params:
var tableParams = { showRowNumber: false, allowHtml: true, width: '100%', cssClassName: tableStyles };
and when I used the percentage width parameter I started to see that the calculations of the width of the table were done properly. So, by setting it to '100%', I was able to get the maximum width while also getting the vertical scrollbar when I needed it, and not getting the horizontal scrollbar when I didn't.
Wild, that I needed to set the width in that way.