CODEWITHSUNDEEP
htmlhtml-tablewidth
user686605
user686605

Reputation:

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 changes from static to absolute positioning, I don't want the td to resize. How?

Upvotes: 1

Views: 674

Answers (2)

Jamie Dixon
Jamie Dixon

Reputation: 54001

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)

Upvotes: 1

alquatoun
alquatoun

Reputation: 590

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);
    });
});

Upvotes: 0

Related Questions