JSFiddle - React, Tailwind, and code Playground

by CSS_Apprentice

HTML

<div id="addRow">Add Row</div>
<table>
  <thead>
    <tr>
      <th colspan="2">Header</th>
      <th colspan="2">Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

CSS

table {border: 1px solid;}
td, th {
    border: 1px solid;
    width: 75px;
}
th {height: 40px;}
td {height: 75px;}

#addRow {
  border: 1px solid;
  display: inline-block;
  margin-bottom: 5px;
  padding: 1px 4px;
}
#addRow:hover {cursor: pointer}

JavaScript

$('#addRow').click(function(){
  function getMaxColCount($table) {
    var maxCol = 0;

    $table.find('tr').each(function(i,o) {
      var colCount = 0;

	  $(o).find('td:not(.maxcols),th:not(.maxcols)').each(function(i,oo) {
        var cc = Number($(oo).attr('colspan'));
        if (cc) {
          colCount += cc;
          } else {
            colCount += 1;
          }
        });
    });

    return maxCol;
    var addTD = '<td></td>'
    $('tbody tr').append('<tr>'addTd * maxCol'</tr>')
}