Split table in two keeping same column width
<p>I'm trying to split a table -- i.e., rip off the <code>thead</code> and put it in its own table. Here's what I've got so far:</p>

<h1><a href="http://jsfiddle.net/mnbayazit/UPeN3/" rel="nofollow">fiddle</a></h1>

<pre><code>var $colgroup = $('&lt;colgroup&gt;');

$('td,th', '.query-results tr:first').each(function () {
    $colgroup.append($('&lt;col&gt;').width($(this).outerWidth()));
});

$('&lt;table&gt;')
    .insertBefore('.query-results')
    .append($colgroup)
    .append(
$('.query-results thead'));

$('.query-results').prepend($colgroup.clone());
</code></pre>

<p>I can't seem to get the column widths to be respected though; the tables never line up. I tried using colgroups <a href="http://stackoverflow.com/a/13073537/65387">like this guy said</a>, but that doesn't seem to have an effect either.</p>

<p>What could be wrong?</p>

<p><a href="http://jsfiddle.net/mnbayazit/UPeN3/1/" rel="nofollow">Using the width attribute</a> doesn't change anything either.</p>
