Не допускать расширения или переполнения столбца

Question

Я новичок в сетке CSS и очень старался, но не повезло, я создаю формат для печати на бумаге формата А4 и настроил фиксированные размеры для столбцов. Содержимое столбца «UNIT» в первой строке (исключая строку заголовка) расширяется / расширяется до следующего столбца всякий раз, когда введенное значение VALUE превышает ширину / границу. Я хочу, чтобы VALUE (т. Е. "UnitName12345678") не пересекать границу, а перешел на следующую строку в том же столбце. Также в minmax(50px , max-content) 50px применяется только к строке HEADER, и то, что мне не хватает, чтобы применить это ко всем строкам.

Этот контейнер будет иметь несколько строк, генерируемых динамически.

Текущий вывод:

Ожидаемый результат:

Код Pen: https://codepen.io/thaslim123/pen/gyQwmm

body {
  margin: 0px;
}

.printcontainertable {
  display: inline-grid;
  grid-template-rows: minmax(50px, max-content);
  grid-template-columns: 100px 500px 100px 100px 100px 100px;
  width: 1150px;
  padding: 10px;
}

.printcontainertable div {
  border: 1px solid black;
  text-align: center;
}

<div class="printcontainertable">

  <div> SL.No</div>
  <div> Product name</div>
  <div> Unit</div>
  <div> Qty</div>
  <div> Price</div>
  <div> total</div>


  <div> 1. </div>
  <div> Apple </div>
  <div>UnitName12345678</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>
  <div> 2. </div>
  <div> Orange </div>
  <div>UnitName</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>

</div>

PS: Поскольку я буду фиксировать контейнер HEADER и FOOTER сверху и снизу вышеупомянутого контейнера (т.е. .printcontainertable), как я могу зафиксировать статическую высоту для того же самого. Пожалуйста, предложите мне, если есть какой-нибудь другой лучший способ реализовать его в GRID.

Answer 1

Хорошо, я думаю, что есть и другие вещи, которые можно улучшить, в зависимости от того, что именно вам нужно (семантика, структура и т. Д.). Основная проблема, касающаяся слова, которое выходит за границы, может быть исправлена ​​путем применения word-break: break-word к элемент, содержащий текст.

body {
  margin: 0px;
}

.printcontainertable {
  display: inline-grid;
  grid-template-rows: minmax(50px, max-content);
  grid-template-columns: 100px 500px 100px 100px 100px 100px;
  width: 1150px;
  padding: 10px;
}

.printcontainertable div {
  border: 1px solid black;
  text-align: center;
}

.unitname {
  word-break: break-word;
}

<div class="printcontainertable">

  <div> SL.No</div>
  <div> Product name</div>
  <div> Unit</div>
  <div> Qty</div>
  <div> Price</div>
  <div> total</div>


  <div> 1. </div>
  <div> Apple </div>
  <div class="unitname">UnitName12345678</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>
  <div> 2. </div>
  <div> Orange </div>
  <div>UnitName</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>

</div>

Answer 2

Я хочу, чтобы ЗНАЧЕНИЕ (т. Е. "UnitName12345678") не пересекало границу, а переместилось на следующую строку в том же столбце.

Затем разрешите разрыв непрерывной строки текстав несколько строк.Используйте свойство overflow-wrap.

Добавьте это к своему коду:

.printcontainertable div {
    overflow-wrap: break-word;
}

---

Также в minmax(50px , max-content) применяется 50px ктолько строка заголовка и то, что мне не хватает, это применить ее ко всем строкам.

Вы используете grid-template-rows.Это создает явные строки, то есть определяемые вами строки.

Итак, когда вы говорите следующее:

grid-template-rows: minmax(50px , max-content);

... вы определяете только одну строку с этимrule.

Вам необходимо использовать grid-auto-rows, который применяется к неявным строкам, что вам нужно, когда строки генерируются динамически.

Сделайте эту настройку для вашего кода:

.printcontainertable {
    display: inline-grid;
    /* grid-template-rows:   minmax(50px , max-content); */
    grid-auto-rows:   minmax(50px , max-content); /* new */
    grid-template-columns: 100px 500px 100px  100px 100px 100px;
    width:1150px;
    padding:10px;
}

.printcontainertable {
  display: inline-grid;
  /* grid-template-rows:   minmax(50px , max-content); */
  grid-auto-rows: minmax(50px, max-content); /* new */
  grid-template-columns: 100px 500px 100px 100px 100px 100px;
  width: 1150px;
  padding: 10px;
}

.printcontainertable div {
  overflow-wrap: break-word; /* new */
  border: 1px solid black;
  text-align: center;
}

body {
  margin: 0px;
}

<div class="printcontainertable">
  <div> SL.No</div>
  <div> Product name</div>
  <div> Unit</div>
  <div> Qty</div>
  <div> Price</div>
  <div> total</div>
  <div> 1. </div>
  <div> Apple </div>
  <div>UnitName12345678</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>
  <div> 2. </div>
  <div> Orange </div>
  <div>UnitName</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>
</div>