why "resize" event not working for my function to detect the height?

Question

I have a table with divs, and I want to each row get the biggest cell height. I have written a function to get it. On first load the function works properly, but when resizing the window, the function is not working. Can you tell me what's the problem?

const setHeight = function() {
  let hieghts = []
  let classes = 1
  let rowNum = document.querySelector("#desc").childElementCount
  for (classes; classes < rowNum; classes++) {
    document.querySelectorAll(`.content${classes}`).forEach(td => {
      hieghts.push(td.clientHeight)
    })
    let max = Math.max(...hieghts)
    document.querySelectorAll(`.content${classes}`).forEach(td => {
      td.style.height = `${max}px`
    })
    max = 0
    hieghts = []
  }
}
window.addEventListener("resize", setHeight) // why this line not working?
setHeight();

.table {
  display: grid;
  grid-template-columns: repeat(6, auto);
  height: 90vh;
  border: 1px solid red;
}

.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid;
}

.cells {
  display: block;
  width: 100%;
  border-bottom: 1px solid;
  padding: 5px;
  box-sizing: border-box;
}

<div class="table">
  <div class="col">
    <span class="cells title">code title 1</span>
    <span class="cells content1">dev-1</span>
    <span class="cells content2">dev-2</span>
    <span class="cells content3">dev-3</span>
  </div>
  <div class="col">
    <span class="cells title">code </span>
    <span class="cells content1">1</span>
    <span class="cells content2">2</span>
    <span class="cells content3">3</span>
  </div>
  <div id="desc" class="col">
    <span class="cells content title">description</span>
    <span class="cells content1">Lorem ipsum dolor sit  </span>
    <span class="cells content2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis incidunt inventore  </span>
    <span class="cells content3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis incidunt inventore  </span>
  </div>
  <div class="col">
    <span class="cells title">num</span>
    <span class="cells content1">1</span>
    <span class="cells content2">1</span>
    <span class="cells content3">1</span>
  </div>
  <div class="col">
    <span class="cells title">prise</span>
    <span class="cells content1">100</span>
    <span class="cells content2">200</span>
    <span class="cells content3">300</span>
  </div>
  <div class="col">
    <span class="cells title">total </span>
    <span class="cells content1">1000</span>
    <span class="cells content2">20000</span>
    <span class="cells content3">15000</span>
  </div>
</div>

Answer 1

The problem is that you calculate the max value in a single for loop and try to set the row height in the table in the same loop. In this case, the row height retains its current state. You will see this logic error if you print the max value to the console in the old method; The height of all rows in the table is printed to the console, not the maximum value.

let rowNum = document.querySelector("#desc").childElementCount;

const setHeight = function() {
    let heights = [];

    /* All row heights are placed in the array. */
    for(let index = 1 ; index < rowNum ; ++index)
    {
        document.querySelectorAll(`.content${index}`).forEach(td => {
            heights.push(td.clientHeight)
        });
    }
    
    /* Maximum row height is learned. */
    let max = Math.max(...heights);
    console.log(max);
    
    /* The maximum row height is assigned to all rows in the table. */    
    for(let index = 1 ; index < rowNum ; ++index)
    {
        document.querySelectorAll(`.content${index}`).forEach(td => {
            td.style.height = `${max}px`
        });
    }
}

window.addEventListener("resize", setHeight);
setHeight();

.table {
  display: grid;
  grid-template-columns: repeat(6, auto);
  height: 90vh;
  border: 1px solid red;
}
.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid;
}
.cells {
  display: block;
  width: 100%;
  border-bottom: 1px solid;
  padding: 5px;
  box-sizing: border-box;
}

<div class="table">
  <div class="col">
    <span class="cells title">code title 1</span>
    <span class="cells content1">dev-1</span>
    <span class="cells content2">dev-2</span>
    <span class="cells content3">dev-3</span>
  </div>
  <div class="col">
    <span class="cells title">code </span>
    <span class="cells content1">1</span>
    <span class="cells content2">2</span>
    <span class="cells content3">3</span>
  </div>
  <div id="desc" class="col">
    <span class="cells content title">description</span>
    <span class="cells content1">Lorem ipsum dolor sit  </span>
    <span class="cells content2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis incidunt inventore  </span>
    <span class="cells content3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis incidunt inventore  </span>
  </div>
  <div class="col">
    <span class="cells title">num</span>
    <span class="cells content1">1</span>
    <span class="cells content2">1</span>
    <span class="cells content3">1</span>
  </div>
  <div class="col">
    <span class="cells title">prise</span>
    <span class="cells content1">100</span>
    <span class="cells content2">200</span>
    <span class="cells content3">300</span>
  </div>
  <div class="col">
    <span class="cells title">total </span>
    <span class="cells content1">1000</span>
    <span class="cells content2">20000</span>
    <span class="cells content3">15000</span>
  </div>
</div>