Style floating table headers
<p>So I've been trying to accomplish getting floating table headers to work. Unfortunately I cannot use something like <a href="http://mkoryak.github.io/floatThead/" rel="nofollow">floatThead jQuery library</a> as I need to hover different rows as you scroll through the table so I've come up with my own solution based on various other SO answers.</p>

<p>However, the problem is that the styling of the floating header does not match the styling of the non-floated header and I'm not sure why that is or the proper way to fix this.</p>

<p>Here's a <a href="https://jsfiddle.net/gkc4jue1/" rel="nofollow">jsFiddle</a> illustrating my current code. The issue is that the first floating header which has different columns does not match the sizing of the non-floating header even though they both have percentage widths (that add up to 100%).</p>

<p>The important javascript:</p>

<pre><code>var persist = $(".persist-area");
var z_index = 900;
var count = 0;
persist.each(function() {
    var el = $(".persist-thead&gt;tr", this);
    el.before(el.clone()).css({"width": el.width(), "top": "0px", "z-index": "899"}).addClass('floating-thead');
    $(".persist-header", this).each(function() {
        var clone = $(this);
        clone.before(clone.clone()).css({
            "width": clone.width(),
            "top": (0 + el.height()) + "px",
            "z-index": "" + z_index
        }).addClass("floating-header").removeClass("persist-header").attr('id', 'floating-header-' + count);
        z_index++;
        count++;
    });
});
</code></pre>

<p>and css:</p>

<pre><code>.floating-thead,
.floating-header {
    position: fixed;
    top: 0;
    visibility: hidden;
}

.floating-thead &gt; td,
.floating-header &gt; td {
    display: inline-block;
    text-align: center;
}
</code></pre>