YUI Scrolling DataTable width problem

I should say, this is weirdest issue I solved lately. We were using YUI Scrolling DataTable to show huge amount of stat information. It’s not the data part that did trouble us, but scroll bars. We started seeing scrollbars every where, even at pages where we had single table with small four columns. Each column was occupied with the space 200% of the given available space. I am sorry that I doubted on YUI ScrollingDataTable widget, but nothing came out after 6 hours of digging logging etc, finally figured out “all is well” with the widget, it’s the problem with the way HTML table rendering inside the widget. Some I got doubt about the CSS associated with the tables, for some reason previous developers assigned

table{
width:100%
}

in CSS. and I made it

table{
width:auto;
}

Guess what? UI Fixed.

Actually this is what happened, all these tables were under floated column divs, with width:100%, tables  occupied space bigger than their containers, since widget tried to size DataTable to actual width of the content and because of CSS property, actual content took more space than needed, we were getting DataTables with huge white space and scrollbars.

Moral of the story is:  If you are using YUI DataTable widget, never use global table selector with width:100%.

Happy Coding.