JSFiddle - React, Tailwind, and code Playground
HTML
<table class="ms-listviewtable">
<tr>
<th>THEAD</th>
<th>THEAD</th>
</tr>
<tr>
<th>THEAD</th>
<th>THEAD</th>
</tr>
<tr>
<td>TBODY</td>
<td>TBODY</td>
</tr>
<tr>
<td>TBODY</td>
<td>TBODY</td>
</tr>
<tr>
<td>TBODY</td>
<td>TBODY</td>
</tr>
</table>
<hr /><hr /><hr /><hr />
<table class="ms-listviewtable">
<tr>
<th>THEAD</th>
</tr>
<tr>
<th>THEAD</th>
</tr>
<tr>
<td>TBODY</td>
</tr>
<tr>
<td>TBODY</td>
</tr>
<tr>
<td>TBODY</td>
</tr>
</table>
CSS
tbody td { background: yellow; }
thead th { background: orange; }
JavaScript
$(function () {
$('.ms-listviewtable').each(function () {
var $table = $(this);
var thead = [];
$table.find('tr > th').each(function () {
var index = $(this).closest('tr').index();
if ($.inArray(index, thead) == -1) {
thead.push(index);
}
});
var tbody = [];
$table.find('tr > td').each(function () {
var index = $(this).closest('tr').index();
if ($.inArray(index, tbody) == -1) {
tbody.push(index);
}
});
var $tbody = $('<tbody></tbody>');
var $thead = $('<thead></thead>');
$.each(thead, function (i, v) {
$table.find('tr').eq(v).clone(true).appendTo($thead);
});
$.each(tbody, function (i, v) {
$table.find('tr').eq(v).clone(true).appendTo($tbody);
});
$table.html('');
$thead.appendTo($table);
$tbody.appendTo($table);
});
});