如何在单元格中制作垂直线以匹配用 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>