JSFiddle - React, Tailwind, and code Playground

by erwinagpasa

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css?v1.4">
</head>

  <body>


    <div class="parent-div">
      <table class="table1">
        <tr>
          <td>1</td>
         </tr>  
      </table>
  
      <table class="table2">
        <tr>
          <td>2</td>
         </tr>  
      </table>
 
      <table class="table2">
        <tr>
          <td>2</td>
         </tr>  
      </table>

      <table class="table1">
        <tr>
          <td>4</td>
         </tr>  
      </table>
 
      <table class="table2">
        <tr>
          <td>5</td>
         </tr>  
      </table>
 
      <table class="table2">
        <tr>
          <td>5</td>
         </tr>  
      </table>

      <table class="table2">
        <tr>
          <td>5</td>
         </tr>  
      </table>    
</div>

<div class="parent-div"></div>
<div class="parent-div"></div>


<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
</body>
</html>

CSS

.table1 {
  border-collapse: collapse;
  margin: 4px;
  height: 400px;
  width: 100%;
}

.table2 {
  border-collapse: collapse;
  margin: 4px;
  height: 200px;
  width: 100%;
}

table, th, td {
  border: 0px solid;
  padding: 5px;
  background-color: #ddd;
  text-align: center;
}

.parent-div {
  /* height: 1122px; */
  width: 25%;
  padding: 10px;
  border: 1px solid #ff0000;
  margin: 10px;
}

JavaScript

//alert($('.parent-div').height());
  
  var cats = $('.parent-div').eq(0).find('table'),
  num = 3;//this is not needed actually

  if($('.parent-div').height() >= 1122){
  cats.each(function(i) { // cycle through each li
    if (i >= num) { // start after num counts
      var temp = $(this),
      count = Math.floor(i / num); // work out the multiples
      $('.parent-div').eq(count).append(temp[0].outerHTML); // add to the next eligable parent
      temp.remove(); // remove it from the first list
      }
    });
  }