CODEWITHSUNDEEP
javascripthtmlgoogle-chromecss
slolife
slolife

Reputation: 19870

Chrome does not honor table width setting using javascript

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

Upvotes: 1

Views: 252

Answers (1)

raam86
raam86

Reputation: 6871

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

Upvotes: 2

Related Questions