JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<table id="t1">
    <tbody>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    <tr><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td></tr>
    <tr><td>9</td><td>10</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    <tr><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td></tr>
    <tr><td>9</td><td>10</td></tr>    
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    <tr><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td></tr>
    <tr><td>9</td><td>10</td></tr>    
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    <tr><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td></tr>
    <tr><td>9</td><td>10</td></tr>    
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    <tr><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td></tr>
    <tr><td>9</td><td>10</td></tr>    
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    <tr><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td></tr>
    <tr><td>9</td><td>10</td></tr>    
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    <tr><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td></tr>
    <tr><td>9</td><td>10</td></tr>            
    </tbody>
</table>

<table id="t2"><tbody></tbody></table>
    
<table id="t3"><tbody></tbody></table>

CSS

table {border:solid 1px red;margin:10px;float:left;}
table td {border:solid 1px gray;padding:4px;}

JavaScript

$(document).ready(function(){
    /*
    var table = $('#t1 tbody');
    var total = table.children().length;
    var half = parseInt(total/2);
    var tr_part_1 = table.children(':lt('+half+')');
    var tr_part_2 = table.children(':gt('+(half -1)+')');    
    tr_part_1.appendTo('#t2');
    tr_part_2.appendTo('#t3');
    */
    var table = $('#t1 tbody');
    table.children().each(function(){
        var tr = $(this);
        var h = tr.height();
        var tds = tr.children();
        $('<tr>'+tds[0].outerHTML+'</tr>').appendTo('#t2 tbody');
        $('<tr>'+tds[1].outerHTML+'</tr>').appendTo('#t3 tbody');
    })
})