The calculated width differs from the actual width of the td element

Question

I do several manipulations in td tags with jQuery - I set their width in the same way as the width of td in another table (this is actually a plugin with a fixed table header, so I have tables - one for the header and one for the main content The corresponding th and td must have the same width).

Problem

All calculators work fine if I look at the "Calculated style" in Chrome - the width is set correctly.
However, the actual width is different from the "calculated width"!

See this image of the computed style of the td element:

Now you might think that the actual width of the element will be 1 + 1 + 96 + 1 + 1 = 100 , but it's 99!

I found this question - The calculated column width is different from the width of the declared css width. How does the browser determine the width? and following the recommendations I used table-layout: fixed; . I used border-collapse: collapse; to remove the space between the columns, so I do not expect this to be a problem.

The code

Here is the part of my code that sets td width s:

 $('thead th, tbody tr:first td').each(function(i, el){ i %= col_count; // I'm using because we go through 2 lines. // It shows at which td we are. */ // col_width is an array with already calculated // widths (using .outerWidth()) for each column */ // if the needed width is the same as the current td's, // we can go to the next td */ if(col_width[i] == $(this).outerWidth()) return 1; // the width to be set with substracted borders and paddings // (here we don't have margins) var new_width = col_width[i] - ($(this).outerWidth() - $(this).width()); $(this).width(new_width); // I have also tried this, but the result was the same: // $(this).css('width', new_width + 'px'); }); 

I should notice that thead th and tbody td are taken from different tables (as I mentioned earlier)

Another attempt

Another thing I've tried is adding one pixel to each column - $(this).width(new_width + 1); . And on the demo page it worked. I copied the new code to this page and to almost all the tables in which it works! There was only one table where there was a problem.
He proved that the container (where the table was located) was not wide enough, so the scroll bar “made” the columns shorter. Of course, I expanded the width of the container. The problem has disappeared.

---

Real question

And when I asked (wrote) this long question, I solved it! So now it is changing a bit: why ?

Why, when I added one extra pixel, the problem disappeared? Why is computed width different from real width ?

Of course, I will be glad if you provide me with a different, more professional solution :)

JSFIDDLE (with already set widths copied from the chrome console). Resize the result window to see the whole table correctly.

Answer 1

The difference in the calculated width and the actual width is due to the use of boundary collapse: failure.

border-collapse: collapse

Borders are reset to the same border whenever possible (border-spacing and empty-cells properties will be ignored)

This reduces the width by 1px for each of the td elements, since each of them has a border reduced to one border.

Answer 2

The calculated width is different from the actual width, because each element has a 1px border and 1 px space in the left and right is the same as the top and bottom.