JSFiddle - React, Tailwind, and code Playground

by djmartini

HTML

<table id="old-table" data-fix-cols='3' data-fix-rows='4'>
		<tbody>
			<tr>
				<td class="gray">CLONE ME</td>
				<td colspan="2" rowspan="2" class="gray">CLONE ME</td>
				<td>Ashgabat</td>
				<td>Barcelona</td>
				<td>Berlin</td>
			</tr>
			<tr>
				<td rowspan="3" class="gray">CLONE ME</td>
				<td>Bucharest</td>
				<td>Warsaw</td>
				<td>Washington</td>
			</tr>
			<tr>
				<td class="gray">CLONE ME</td>
				<td class="gray">CLONE ME</td>
				<td>Hamburg</td>
				<td>Guatemala</td>
				<td>Dakar</td>
			</tr>
			<tr>
				<td class="gray">CLONE ME</td>
				<td class="gray">CLONE ME</td>
				<td>Dresden</td>
				<td>Dublin</td>
				<td>Geneva</td>
			</tr>
			<tr>
				<td>Zagreb</td>
				<td>Kinshasa</td>
				<td>Kishinev</td>
				<td>Krakow</td>
				<td>Lima</td>
				<td>Lisbon</td>
			</tr>
			<tr>
				<td>London</td>
				<td>Los Angeles</td>
				<td>Luxembourg</td>
				<td>Madrid</td>
				<td>Manila</td>
				<td>Mexico</td>
			</tr>
			<tr>
				<td>Milan</td>
				<td>Montreal</td>
				<td>Mumbai</td>
				<td>Nairobi</td>
				<td>Nicosia</td>
				<td>New York</td>
			</tr>
			<tr>
				<td>Osaka</td>
				<td>Oslo</td>
				<td>Ottawa</td>
				<td>Paris</td>
				<td>Prague</td>
				<td>Riga</td>
			</tr>
			<tr>
				<td>Rome</td>
				<td>Rotterdam</td>
				<td>Salvador</td>
				<td>Samarkand</td>
				<td>Sydney</td>
				<td>Singapore</td>
			</tr>
			<tr>
				<td>Sofia</td>
				<td>Istanbul</td>
				<td>Taipei</td>
				<td>Tbilisi</td>
				<td>Zurich</td>
				<td>Chicago</td>
			</tr>
		</tbody>
	</table>
<table id="new-table"></table>

CSS

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 40px 0;
}
td {
    border: 1px #aaa solid;
    box-sizing: 
}
#new-table {
    display: none;
}
.gray{
    background: #aaa;
}

JavaScript

var old_table = $("#old-table");
var my_clone = $('#old-table tbody').clone();
var fix_cols = old_table.data('fix-cols');
var fix_rows = old_table.data('fix-rows');

fix_cols--;
fix_rows--;

my_clone.find('tr:gt(' + fix_rows + ')').remove();
my_clone.find('tr').each(function(i,e)
{
    my_clone.find('tr:eq(' + i + ')').find('td:gt(' + fix_cols + ')').remove();
});

$('#new-table').html(my_clone);

$('#new-table').show();