JSFiddle - React, Tailwind, and code Playground

by jrunning

HTML

<table>
  <tr>
    <td>fish</td>
    <td>salmon</td>
  </tr>
  <tr>
    <td>fish</td>
    <td>cod</td>
  </tr>
  <tr>
    <td>fish</td>
    <td>plaice</td>
  </tr>
  <tr>
    <td>bird</td>
    <td>robin</td>
  </tr>
  <tr>
    <td>bird</td>
    <td>crow</td>
  </tr>
</table>

CSS

table, tr, td {
  border: solid 1px black;
}

JavaScript

/*
let table = document.querySelector('table');
	let rowCount = 1;
	for (let i = 0; i < (table.rows.length -1); i++) {
		if (table.rows[i].cells[0].innerHTML === table.rows[i+1].cells[0].innerHTML) {
			rowCount++;
		} else if (rowCount !== 1) {
			table.rows[i].cells[0].setAttribute('rowspan', rowCount);
			for (let j = (i - rowCount + 1); j < rowCount; j++) {
				table.rows[j].cells[0].remove();
			};
		rowCount = 1;
		};
	};