JSFiddle - React, Tailwind, and code Playground

by josekerekes

HTML

<div class="table-wrapper">
<table>
   <tr>
        <td>col1</td>
        <td>col2<br> rowspan</td>
        <td>col3</td>
        <td>col4</td>
   </tr> 
     <tr>
        <td>row2 col1</td>
        <td>row2 col2</td>
        <td>row2 col3</td>
        <td>row2 col4</td>
   </tr> 
</table>
</div>

CSS

.table-wrapper {position:relative}
table {border-collapse:collapse;border:0}
td {padding:5px 10px;vertical-align:top;}
td:first-child {position:absolute}
td:first-child + td {padding-left:110px}

JavaScript

var cumulativeHeight = 0;
$('tr').each(function(i) {
    $('td:first-child',this).css('top',cumulativeHeight);
    
    var tds = $('td',this).map(function() {
        return $(this).outerHeight();
    }).get();
    console.log(tds)
	
    var max = Math.max.apply(Math, tds);
    cumulativeHeight += max;
    
   
    
});