jQuery UI issues with tables in dialogs

Question

I have a jQuery UI dialog to which I applied a padding, and inside the dialog I have a long table. I then configure the dialog to be of limited height in order to have a scrollbar.

It seems that whenever a nowrap is applied to the table cells, the padding to the right of the table is covered by the scrollbar. If I remove the nowrap, it works fine.

Here is an editable example:

http://jsbin.com/okolap/4/edit

Answer 1

It seems that it only happens when you set the dialog's width to auto.

One workaround is to set the table's width to 100% and reset the dialog's width to a fixed length. The length needs to add a padding equal or larger than the width of the scroll bar. For example:

var newWidth = $('.Dialog').width() + 50;
$('.Dialog').width(newWidth);

See this in action: http://jsbin.com/okolap/10/.