I want to make a table with HTML using flexbox, not table tag since I've encountered a

I want the borders of cell either left or right cells keeps the height of table body till the end; That's I've used JS looping and creating empty cells just to imitate space of height but I think it's not the best approach, it breaks the borders of table and go beyond or more than it should take. here's picture of what happen look at the bottom of table:

let iLogic = 0,
  rowsNew = "";
while (iLogic <= 29) {
  rowsNew  = `<div >
  <div >&nbsp;</div>
  <div >&nbsp;</div>
  <div >&nbsp;</div>
  <div >&nbsp;</div>
  <div >&nbsp;</div>
  <div >&nbsp;</div>
  <div >&nbsp;</div>
  </div>
  `;
  iLogic  ;
}

document.querySelector(".template").innerHTML  = rowsNew;

.table {
    height: 808px;
    margin-top: 10px;
    border: 1px solid;
  }
  .row {
    display: flex;
  }
  .row .cell-th {
    border: 1px solid gray;
    font-weight: bold;
  }
  .row .cell-th {
    border: 1px solid rgb(5, 5, 5);
    width: 10%;
    font-weight: bold;
    text-align: center;
    padding: 4px;
  }
  .row .cell-td {
    border: 1px solid gray;
    padding: 4px;
    width: 10%;
    text-align: center;
    border-bottom: none;
    border-top: none;
  }
  /*Designation*/
  .row .cell-th:nth-child(3),.row .cell-td:nth-child(3){
      width: 50%;
  }
  .row .cell-th:nth-child(4),.row .cell-td:nth-child(4){
      width: 5%;
  }
  /*Code Article*/
  .row .cell-th:nth-child(1),.row .cell-td:nth-child(1){
      width: 15%;
  }
  /*Code TVA*/
  .row .cell-th:nth-child(2),.row .cell-td:nth-child(2){
      width: 5%;
  }
  /*Remise*/
  .row .cell-th:nth-child(6),.row .cell-td:nth-child(6){
      width: 7%;
  }

<div >
          <div >
            <div >Code Article</div>
            <div >Code TVA</div>
            <div >Désignation</div>
            <div >Qté</div>
            <div >P.U.TTC</div>
            <div >Remise</div>
            <div >Montant TTC</div>
          </div>
          <div > <div >
            <div >DV21-10030</div>
            <div >20</div>
            <div >LIT ELECTRIQUE HAYDN  AVEC BARRIERE BOIS MILANO   POTENCE</div>
            <div >1</div>
            <div >15 800,00</div>
            <div >0</div>
            <div >15 800,00</div>
          </div> <div >
            <div >DV21-10030</div>
            <div >20</div>
            <div >MATELAS GAUFRIER MONO-PORTANCE AVEC HOUSE ZIPPEE SUR COTES</div>
            <div >1</div>
            <div >2 450,00</div>
            <div >0</div>
            <div >2 450,00</div>
          </div> <div >
            <div >DV21-10030</div>
            <div >20</div>
            <div >FRAIS DE TRANSPORT</div>
            <div >300</div>
            <div >1,00</div>
            <div >0</div>
            <div >299,999</div>
          </div></div>
        </div>

i'd be appreciated if you could help me reaching a solution!

CodePudding user response：

what's your idea about this solution ?
but it has a bug and that's when the window is resizing!!!

let 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.onresize = setHeight;  // why this line not work ???

setHeight();

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

<div >
  <div >
    <span >code title 1</span>
    <span >dev-1</span>
    <span >dev-2</span>
    <span >dev-3</span>
  </div>
  <div >
    <span >code </span>
    <span >1</span>
    <span >2</span>
    <span >3</span>
  </div>
  <div id="desc" >
    <span >description</span>
    <span >Lorem ipsum dolor sit </span>
    <span >Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis incidunt inventore </span>
    <span >Lorem ipsum dolor sit amet consectedgdg gdgdfg fgdfg dfgdfgd dgdfgdfg dfhd h h fgghg fghf hghhfem ipsum dolor sit amet consectedgdg gdgdfg fgdfg dfgdfgd dgdfgdfg dfhd h h fgghg fghf hghhfhh ftur adipisicing elit. Blanditiis incidunt inventore </span>
  </div>
  <div >
    <span >num</span>
    <span >1</span>
    <span >1</span>
    <span >1</span>
  </div>
  <div >
    <span >prise</span>
    <span >100</span>
    <span >200</span>
    <span >300</span>
  </div>
  <div >
    <span >total </span>
    <span >1000</span>
    <span >20000</span>
    <span >15000</span>
  </div>
</div>