How do I append CSS values in a dynamic table

Question

I'm using GWT table which is being generate dynamically with lots of columns but with out horizontal scroll bar and to get the scrollbar, we need wrapper with fixed width around the table, but GWT do create container but not adding any width to it.

To solve the problem, I'm calculating width of screen and adding it to the table wrapper, which is adding scroll bar to the table but working weirdly.

1. It adds scroll bar when I move mouse near to table
2. It doesn't work when in resize the table

I'm using Live() as it works for run time objects, also I can't use click event.

Here is the code:

$(function() {
    var screenwidth = $(window).width();
    $('body').live("mouseover", function() {
        $('.scrollbar').css({
            'width' : (screenwidth) - 40
        });
        $("body").unbind("mouseover");
    });
});

Answer 1

1. Use $('body').on("mouseover") If you are getting scrollbar you can handle that by setting up overflow to none. If you need to change css dynamically you can add / remove class and keep css separate from your code. Its a good practice.