JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<table width="100%" id="tabela">
    <tr>
        <th class="column0">Distribuidores</th>
        <th class="column1">kl</th>
        <th class="column2">kl</th>
        <th class="column3">kl</th>
        <th class="column4">kl</th>
        <th class="column5">kl</th>
    </tr>
    <tr>
        <td rowspan="1" class="column0">a</td>
        <td rowspan="1" class="column1">a</td>
        <td rowspan="1" class="column2">a</td>
        <td rowspan="1" class="column3">a</td>
        <td rowspan="1" class="column4">a</td>
        <td rowspan="1" class="column5">a</td>
    </tr>
    <tr>
        <td rowspan="1" class="column0">a</td>
        <td rowspan="1" class="column1">a</td>
        <td rowspan="1" class="column2">a</td>
        <td rowspan="1" class="column3">a</td>
        <td rowspan="1" class="column4">a</td>
        <td rowspan="1" class="column5">a</td>
    </tr>
    <tr>
        <td rowspan="1" class="column0">b</td>
        <td rowspan="1" class="column1">a</td>
        <td rowspan="1" class="column2">a</td>
        <td rowspan="1" class="column3">a</td>
        <td rowspan="1" class="column4">a</td>
        <td rowspan="1" class="column5">a</td>
    </tr>
    <tr>
        <td rowspan="1" class="column0">b</td>
        <td rowspan="1" class="column1">a</td>
        <td rowspan="1" class="column2">a</td>
        <td rowspan="1" class="column3">a</td>
        <td rowspan="1" class="column4">a</td>
        <td rowspan="1" class="column5">a</td>
    </tr>
    <tr>
        <td rowspan="1" class="column0">b</td>
        <td rowspan="1" class="column1">a</td>
        <td rowspan="1" class="column2">a</td>
        <td rowspan="1" class="column3">a</td>
        <td rowspan="1" class="column4">a</td>
        <td rowspan="1" class="column5">a</td>
    </tr>
    <tr>
        <td rowspan="1" class="column0">b</td>
        <td rowspan="1" class="column1">a</td>
        <td rowspan="1" class="column2">a</td>
        <td rowspan="1" class="column3">a</td>
        <td...

CSS

#tabela td,#tabela th{
    margin:1px;
    background:#eee;
}

JavaScript

$('#tabela').each(function () {
 
    var dimension_cells = new Array();
    var dimension_col = null;
    var columnTitle = "Distribuidores";
 
    var i = 0;

    $(this).find('th').each(function () {
        
        if ($(this).html().trim() == columnTitle) {
            dimension_col = i;
        }
        i++;
    });
    
 
   
    var first_instance = null;

    $(this).find('tr').each(function () {
        
        var dimension_td = $(this).find('td').eq( dimension_col ) ;
 
        if (first_instance == null) {
            first_instance = dimension_td;
        } else if (dimension_td.text() == first_instance.text()) {

            dimension_td.remove();

            first_instance.attr('rowspan', parseInt(first_instance.attr('rowspan'),10) + 1);
        } else {
            first_instance = dimension_td;
        }
 
    });
});