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

Question

我想使用 flexbox 制作一個帶有 HTML 的table ，而不是table tag ，因為當我想在chrome上打印頁面時遇到了一個奇怪的行為，表格中tbody的高度減小到適合其寬度，這是我不知道的我想讓他保持固定高度，這就是為什么我使用 flex 至少我可以控制設置高度！

但這是我再次面臨的問題：

我希望單元格的左側或右側單元格的邊框將表格主體的高度保持到最后； 那是我使用JS循環並創建空單元格只是為了模仿高度空間，但我認為這不是最好的方法，它打破了table和 go 的邊界超出或超過了它應該采取的。 這是發生在表格底部的圖片：

 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>

如果您能幫助我找到解決方案，我將不勝感激！

Answer 1

你對這個解決方案有什么想法？
但它有一個錯誤，那就是 window 正在調整大小！

 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>