Chrome does not honor table width setting using javascript

Question

Chrome doesn't seem to honor the .width() setting that I set on a table. IE10 does.

I get the width of the table after the page is done loading: 425px. Then I remove the row with the widest content, which makes the table repaint and the table's width shrinks: 185px.

Then, I set the table's width to the original value, 425px. But if I check the width of the table after the set, it is off (by 2px in my experiments): 423px.

Is this a known bug?

Am I using the wrong get/set?

It seems that it has to do with the table border (1px border X2 = 2px), but do I need to do calculations to account for the border when setting the width?

I have a jsfiddle that replicates the problem:

http://jsfiddle.net/slolife/zLyQ2/

var orgWidth = $('table').width();
alert('Original width = ' + orgWidth);
$('table').width(orgWidth);
alert('Width after setting width to ' + orgWidth + ' = ' + $('table').width());
$('#two').remove();
alert('Width after remove = ' + $('table').width());

raam86 · Accepted Answer · 2013-06-18 22:09:22Z

2

It's all about the box model.

add

table{
   box-sizing: border-box;
}

The link is a very interesting read but basically you force calculation including borders and padding which is not compatible with w3c spec.

updated jsFiddle

answered Jun 18, 2013 at 22:09

raam86

6,8812 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Chrome does not honor table width setting using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related