Fixing a td's width

I've got a div in a td. The width of the content in the div is variable. When I click on the div, I change the div's position attribute from static to absolute. The td loses its width when I change the position attribute of the div within it.

See this jsfiddle for an illustration.

When the div chan开发者_JAVA百科ges from static to absolute positioning, I don't want the td to resize. How?

The td is resizing because the div, which is creating the width of the td, is taking out of the natural document flow. The td considers itself as having no relation to the div at this point.

You'll need to set the width of the td in accordance with the width of the div if you want it to retain that size.

UPDATE

Here's one way you can quite quickly acheive what you're after: http://jsfiddle.net/2A2rR/3/ (it's not perfect but you get the general idea)

jQuery(function() {
    jQuery('#widthKeeper').click(function() {
           var divWidth = $("table tr td:firstchild").css(width);
           jQuery(this).css('position', 'absolute');
           jQuery("table tr td:firstchild").css('width',divWidth);
    });
});