JSFiddle - React, Tailwind, and code Playground

by muss

HTML

<div class="sl_ScrollList resultSet"> 
        
        
          
         <div class="sl_fixedFirst"><table class="sl_NewFixedTable"><tr class="sl_NewFixedTR" style="height: 22px;"><td class="sl_fixedFirstCol first">fixed 1 </td></tr><tr class="sl_NewFixedTR" style="height: 61px;"><td class="sl_fixedFirstCol first">fixed 2</td></tr><tr class="sl_NewFixedTR" style="height: 41px;"><td class="sl_fixedFirstCol first">fixed 3</td></tr><tr class="sl_NewFixedTR" style="height: 41px;"><td class="sl_fixedFirstCol first">fixed 3</td></tr></table></div><div class="sl_scrolling">
         <table class="sl_scrollingTable">
            <thead>   
              <tr class="sl_scrollingTR">
                
                <td class="sl_scrollingTD first">Title 1</td>
                <td class="sl_scrollingTD">Title 1</td>
                <td class="sl_scrollingTD">Title 1</td>
                <td class="sl_scrollingTD">Title 1</td>
                <td class="sl_scrollingTD">Title 1</td>
                <td class="sl_scrollingTD">Title 1</td>
                <td class="sl_scrollingTD">Title 1</td>
                <td class="sl_scrollingTD">Title 1</td>
                <td class="sl_scrollingTD">Title 1</td>
                </tr>
            </thead>
            <tbody>
              <tr class="sl_scrollingTR">
                
                <td class="sl_scrollingTD first">Content Content <br> Content Content ContentContent <br> Content Content Content </td>
                <td class="sl_scrollingTD">Content Content Content Content Content</td>
                <td class="sl_scrollingTD">Content Content Content Content Content</td>
                <td class="sl_scrollingTD">Content Content Content Content Content</td>
                <td class="sl_scrollingTD">Content Content Content Content Content</td>
                <td class="sl_scrollingTD">Content Content Content Content Content</td>
                <td class="sl_scrollingTD">Content Content Content Content...

CSS

.sl_ScrollList {clear: both;   border: 1px solid red; overflow-x: auto; box-sizing: border-box; -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  border-collapse: collapse; }
.sl_ScrollList td { vertical-align:top; border-bottom: 1px solid red; width: 100%;  box-sizing: border-box; -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;}
 
.sl_scrolling { position: relative; overflow-x: auto;   float: left; white-space: nowrap;  min-width: 100px; width: 80%; }
.sl_ScrollList.sl_singleCol .sl_scrolling { width: 90%; }


.sl_scrollingTable { width: 100%; }

.sl_scrollingTR {}
.sl_scrollingTD { min-width: 200px; }

.sl_fixedLast {  min-width: 80px; float: left; width: 10%; background-color: #f7f7f7; }
.sl_fixedFirst {  min-width: 80px; float: left; width: 10%; background-color: #f7f7f7; }

 .sl_fixedFirstCol {}
.sl_fixedLastCol { } 

.sl_NewFixedTable { width: 100%; }
.sl_NewFixedTR { }
.sl_ScrollList {} 
.sl_scrollingTable td {}

JavaScript

// height
        $(".sl_NewFixedTR", ".sl_NewFixedTable").each(function(i) {
            
            
             var scrollTRHeight = $("TR", ".sl_scrollingTable").eq(i).height() 
            var newTableTRHeight = $(this).height()
             
            if (newTableTRHeight<scrollTRHeight) {
                
                    var newHeight =   scrollTRHeight
                    } else {    
                    var newHeight =  newTableTRHeight
                 }
             
            console.log(newHeight)
            
            
            $(this).height(newHeight)
              
        });