JSFiddle - React, Tailwind, and code Playground

HTML

<h2>HTML Table</h2>
<body>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germanyindgo</td>
  </tr>
   <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Brazil</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Argentina</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Chile</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  </tbody>
</table>
</body>

CSS

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
th {
  background: #a9a9a9;
}
td, th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
  font-family: monospace;
  font-size: 17px;
}
.dark {
  background-color: #dddddd;
}

JavaScript

let previousObj = [];
const rows = $("table tr");
rows.each(function(i, el) {
	let obj = [];
	$(el).children("td").each(function(ic, elc) {
  	obj.push(elc);
    
    if (previousObj.length > ic) {
    	if (previousObj[ic].innerHTML == obj[ic].innerHTML) {
      	$(previousObj[ic]).attr('rowspan', getRowsSpan(ic, i, obj[ic].innerHTML));
        $(obj[ic]).remove();
      }      
    }
  });
  
  previousObj = obj;
});

function getRowsSpan(col, row, value) {
	var rowSpan = 2;
  var actualRow = row+1;
  
  while ($(rows[actualRow]).children("td")[col].innerHTML == value) {
  	rowSpan++;
    actualRow++;
  } 
  
  return rowSpan;
}