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

Question

我想使用 flexbox 制作 table 和 HTML，而不是 table tag，因为我在上打印页面时遇到 =40=]chrome table 中 tbody 的高度减小以适合其宽度，这是我不我不想让他保持固定高度，这就是为什么我使用 flex 至少我可以控制设置高度！

但是我又遇到了这个问题：

我希望单元格的边框 左或右 单元格保持 table 正文的高度直到最后；那就是我使用 JS 循环并创建 空单元格 只是为了模仿 space 的高度，但我认为这不是最好的方法，它打破了 [= =14=] 并超越或超出应有的范围。这是发生的事情的图片，请看 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">P.U.TTC</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 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 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>

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

How to make vertical line in cell to match height of table made with flexbox?

javascript

html

css

html-table

flexbox