JSFiddle - React, Tailwind, and code Playground

HTML

<table id="old-table" data-fix-cols='3'>
    <tbody>
        <tr>
            <td class="gray">CLONE ME</td>
            <td colspan="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>
         ...

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;
    border-color:red;
}

JavaScript

var old_table = $("#old-table");
alert('1');
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--;
var tDsInRow = [];
my_clone.find('tr:gt(' + fix_rows + ')').remove();
my_clone.find('tr').each(function (i, e) {
    if (typeof tDsInRow[i] == "undefined") {
        tDsInRow[i] = fix_cols;
        console.log(tDsInRow[i]);
    }
console.log(my_clone.html());
    my_clone.find('tr:eq(' + i + ')').find('td:lt(' + fix_cols + ')').each(function (j, td) {

        if (td.colSpan > 1 && td.rowSpan > 1) {
            tDsInRow[i] = tDsInRow[i] - (td.colSpan - 1)
            for (var j = 1; j < td.rowSpan; j++) {
                if (typeof tDsInRow[i + j] == "undefined") {
                    tDsInRow[i + 1] = fix_cols;
                }

                tDsInRow[i + j] = tDsInRow[i + j] - (td.colSpan)
            }
        } else if (td.colSpan > 1) {
            tDsInRow[i] = tDsInRow[i] - (td.colSpan - 1)
        } else if (td.rowSpan > 1) {
            for (var j = 1; j < td.rowSpan; j++) {
                if (typeof tDsInRow[i + j] == "undefined") {
                    tDsInRow[i + j] = fix_cols;
                }

                tDsInRow[i + j] = tDsInRow[i + j] - (td.colSpan)
            }
        }
    });
});

my_clone.find('tr').each(function (i, e) {
    if (tDsInRow[i] > 0) {
        my_clone.find('tr:eq(' + i + ')').find('td:gt(' + (tDsInRow[i] - 1) + ')').remove();
    } else {
        my_clone.find('tr:eq(' + i + ')').find('td').remove();
    }
});

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

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