JSFiddle - React, Tailwind, and code Playground

HTML

<table id="foo">
    <tr>
        <td id="_1">valeur 1</td>
        <td id="_2">valeur 2</td>
        <td id="_3"></td>
        <td id="_4"></td>
       
    </tr>
    <tr>
        <td id="_5">valeur 3</td>
        <td id="_6">valeur 4</td>
        <td id="_7">valeur 5</td>
        <td id="_8">valeur 6</td>      
    </tr>
    <tr>
        <td id="_9">valeur 7</td>
        <td id="_10">valeur 8</td>
        <td id="_11">valeur 9</td>
        <td id="_12">valeur 10</td>        
    </tr>
</table>

CSS

td { border: solid 1px grey;}
table{
border-collapse: collapse;}

JavaScript

$('td').click(function(){ alert($(this).attr('id'));})

tabfullcells=[];	
tabemptycells=[];
cpl=$('#foo tr:eq(0) td').length;
console.log (cpl)

$('#foo td').each(function(){
    if($(this).text()!=''){
        tabfullcells.push($(this))}
    else {tabemptycells.push($(this))}
});

ligne=-1;

$.each(tabfullcells,function(i,cell){
    ligne=(i % cpl == 0)?ligne+1:ligne;
    $('#foo tr:eq('+(ligne)+')').append(cell)
     })

$.each(tabemptycells,function(i,cell){
   ligne=((ligne+i) % cpl == 0)?ligne+1:ligne;
   $('#foo tr:eq('+(ligne)+')').append(cell)
     })