Computed width is different from the real width of a td element

Question

I am doing some manipulations on td tags using jQuery - I'm setting their width to be the same as the width of a td in another table (actually this is a fixed-header-table plugin, so I have to tables - one for the header and one for the main content. The corresponding ths and tds should have the same width).

The problem

All calculatinos work fine if I look at 'Computed style' in Chrome - the widths are set properly.
However, the real width is different than the 'computed width'!

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

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

I found this question - Computed column width is different than css declared width for column. How does browser decide width? and following the advice I used table-layout: fixed;. I used border-collapse: collapse;, either, in order to remove the space between the columns, so I don't expect this will be the problem.

The code

Here is a part of my code which sets the td widths:

$('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 from different tables (as I mentioned before)

Another try

Another thing I tried - adding one pixel to each column - $(this).width(new_width + 1);. And on the demo page it worked. I copied the new code to the real page and on the almost all tables it worked! There was only one table where there was a problem.
It proved that the container (where the table was in), was not wide enough, so the scrollbar "made" the columns shorter. Of course, I expanded the container's width. The problem disappeared.

---

The real question

And while asking (writing) this long question, I solved it! So now it is changing a little bit: why?

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

Of course, I will be happy if you provide me another, more professional solution :)

JSFIDDLE (with already set widths, copied from the chrome console). Resize the result box to see the whole table properly.

Answer 1

The difference in computed width and real width is due to the use of border-collapse: collapse.

border-collapse: collapse

Borders are collapsed into a single border when possible (border-spacing and empty-cells properties will be ignored)

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