Chcę zrobić table z HTML za pomocą flexbox, a nie table tag, ponieważ napotkałem dziwne zachowanie, gdy chciałem wydrukować stronę w chrome o wysokości tbody w tabeli zmniejszony, aby pasował do jego szerokości, czego nie chcę, chcę utrzymać go ze stałą wysokością, dlatego wybrałem flex, przynajmniej mam kontrolę nad ustawieniem wysokości!

Ale oto problem, z którym ponownie się spotkałem:

enter image description here

Chcę, aby obramowanie komórki lewej lub prawej utrzymywało wysokość ciała tabeli do końca; To znaczy, że użyłem JS pętli i tworzenia pustych komórek tylko po to, by imitować przestrzeń wysokości, ale myślę, że to nie jest najlepsze podejście, łamie granice table i wychodzi poza lub więcej niż powinno. oto obraz tego, co się stało, spójrz na dół tabeli:

enter image description here

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>

Byłbym wdzięczny, gdybyś pomógł mi znaleźć rozwiązanie!

0
TAHER El Mehdi 24 styczeń 2022, 14:19
Twój stół jest responsywny?
 – 
M.R MRF
24 styczeń 2022, 16:10

1 odpowiedź

Najlepsza odpowiedź

Jaki jest twój pomysł na to rozwiązanie?
ale ma błąd i wtedy zmienia się rozmiar okna!!!

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>
1
M.R MRF 24 styczeń 2022, 17:33
Dzięki, działa jak czar!
 – 
TAHER El Mehdi
24 styczeń 2022, 17:40