Google Chart Tools Display in scrollable <Div>

I'm currently using the table in Google Chart Tools to display data I pull from a database. I then go ahead and display this grid inside a scroll-able div. As you can see on t开发者_高级运维he attached screenshot, the column headings for some reason get wrapped to multiple lines, but I would like to have it display the column headings in only one line, not 3 or whatever else it wraps to...

And here is the CSS I use on the div:

.reportGrid {

   width: 1024px;
   height: 300px;
   border: 2px solid #ccc;
   background-color: #ffffff;
   overflow: auto;
}

Does anybody have an idea why this would happen and how to fix it?

Add to your CSS class white-space: nowrap;

If you want the column headings to not wrap, then the table must be wide enough to accommodate them.

You can truncate them with javascript dynamically if you have to.