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:
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:
let iLogic = 0,
rowsNew = "";
while (iLogic <= 29) {
rowsNew += `<div class="row">
<div class="cell-td"> </div>
<div class="cell-td"> </div>
<div class="cell-td"> </div>
<div class="cell-td"> </div>
<div class="cell-td"> </div>
<div class="cell-td"> </div>
<div class="cell-td"> </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
24 styczeń 2022, 14:19
Twój stół jest responsywny?
–
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
24 styczeń 2022, 17:33
Dzięki, działa jak czar!
–
24 styczeń 2022, 17:40