How to set the width of each header cell in a table (with fixed header) to be the same to the biggest in its column, and make the browser respect it?
<p>Here is the infamous table:</p>

<p><a href="https://i.stack.imgur.com/WCT4D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WCT4D.png" alt="enter image description here"></a></p>

<p>My boss wants me, at this time of the year, to make the header of the table fixed, so the user can scroll down the table and continue reading the header. I want to preserve the original precomputed dimensions of the table, I mean, the width that every column has at the moment of its creation (widths aren't established by CSS) and then, adapt the header so its columns match the columns of the body. Following some of the answers I found in Stackoverflow, I started making the header and the body of the table <code>display: block</code>. And after that, I wrote this:</p>

<pre><code>function setTableHeadDimensions() {
    var $taskTable = $('.tablaTareas_PEMVISUALIZA'),
        $firstRow = $taskTable.find('tbody &gt; tr:first-child'),
        $firstRowTds = $firstRow.find('td'),
        $firstRowHead = $taskTable.find('thead &gt; tr:first-child'),
        $secondRowHead = $taskTable.find('thead &gt; tr:eq(1)'),
        $firstRowHeadThs = $firstRowHead.find('th'),
        $secondRowHeadThs = $secondRowHead.find('th'),
        i = 0,
        cells = [];

    //We prepare CSS, so we can specify width.
    $taskTable
        .css('table-layout', 'fixed')
        .find('td, th').each(function () {
            var $tdh = $(this);
            $tdh.css('box-sizing', 'border-box');
            $tdh.css('overflow', 'hidden');
        });

    //Cells of the first row of the table head.
    for (i = 0; i &lt; 3; i++) {
        cells.push($($firstRowHeadThs[i]));
    }

    //Cells of the second row of the table head.
    for (i = 0; i &lt; $secondRowHeadThs.length; i++) {
        cells.push($($secondRowHeadThs[i]));
    }

    //Rest of the cells for the first row.
    for (i = 5; i &lt; $firstRowHeadThs.length; i++) {
        cells.push($($firstRowHeadThs[i]));
    }

    //Try to set the width of the current column's header cell
    //to the biggest cell width in the column.
    for (i = 0; i &lt; cells.length; i++) {
        var maxWidth = 0;

        $taskTable.find('td:nth-child(' + (i + 1) + ')').each(function () {
            var $el = $(this);
            maxWidth = Math.max(maxWidth, $el.width());
        });

        cells[i].width(maxWidth);
    }
}
</code></pre>

<p>But, as you can see in the picture, the browser doesn't want to cooperate. What's more, it establishes the width of the cell, but to a number that doesn't match the width of it's corresponding column:</p>

<p><a href="https://i.stack.imgur.com/f1rPm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f1rPm.png" alt="enter image description here"></a></p>

<p>What's more, it doesn't match the width of the row it should match:</p>

<p><a href="https://i.stack.imgur.com/nfJip.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nfJip.png" alt="enter image description here"></a></p>

<p>So I have two questions:</p>

<ol>
<li>Why does the browser behave in the way it does?</li>
<li>How can I solve this problem in a way compatible with IE8? (no fancy CSS3 solution, please)</li>
</ol>

<p>Here's a codepen with the example cut down to the minimum necessary: <a href="https://codepen.io/PolarKuma/pen/mONWPd" rel="nofollow noreferrer">Codepen example</a></p>