如何在单元格中制作垂直线以匹配用 flexbox 制作的表格的高度？

Question

I want to make a table with HTML using flexbox, not table tag since I've encountered a weird behavior when I wanted to print a page on chrome the height of tbody in table reduced to fit its width, which is something I don't want I want to keep him with fixed height, that's why I went using flex at least I've control of setting height!

But here's the issue I faced again:

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 class="row"> <div class="cell-td">&nbsp;</div> <div class="cell-td">&nbsp;</div> <div class="cell-td">&nbsp;</div> <div class="cell-td">&nbsp;</div> <div class="cell-td">&nbsp;</div> <div class="cell-td">&nbsp;</div> <div class="cell-td">&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 class="table"> <div class="row"> <div class="cell-th">Code Article</div> <div class="cell-th">Code TVA</div> <div class="cell-th">Désignation</div> <div class="cell-th">Qté</div> <div class="cell-th">PUTTC</div> <div class="cell-th">Remise</div> <div class="cell-th">Montant TTC</div> </div> <div class="template"> <div class="row"> <div class="cell-td">DV21-10030</div> <div class="cell-td">20</div> <div class="cell-td">LIT ELECTRIQUE HAYDN AVEC BARRIERE BOIS MILANO + POTENCE</div> <div class="cell-td">1</div> <div class="cell-td">15 800,00</div> <div class="cell-td">0</div> <div class="cell-td">15 800,00</div> </div> <div class="row"> <div class="cell-td">DV21-10030</div> <div class="cell-td">20</div> <div class="cell-td">MATELAS GAUFRIER MONO-PORTANCE AVEC HOUSE ZIPPEE SUR COTES</div> <div class="cell-td">1</div> <div class="cell-td">2 450,00</div> <div class="cell-td">0</div> <div class="cell-td">2 450,00</div> </div> <div class="row"> <div class="cell-td">DV21-10030</div> <div class="cell-td">20</div> <div class="cell-td">FRAIS DE TRANSPORT</div> <div class="cell-td">300</div> <div class="cell-td">1,00</div> <div class="cell-td">0</div> <div class="cell-td">299,999</div> </div></div> </div>

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

Answer 1

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 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 consectedgdg gdgdfg fgdfg dfgdfgd dgdfgdfg dfhd hh fgghg fghf hghhfem ipsum dolor sit amet consectedgdg gdgdfg fgdfg dfgdfgd dgdfgdfg dfhd hh fgghg fghf hghhfhh ftur 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>