PUG: Таблица в таблице из array of objects?

У меня задача создать таблицу определенной ширины и наполнять ее объектами из массива объектов заполняя ее по 6 объектов в ряд, создавая новый ряд каждый раз когда заполнятся 6 объектов и так до конца массива.

Так выглядит харткодет таблица:

  h1.title Chart For #{item.category} #{item.name}
    table.table
      tr.table
        td
          table.inerTable
            tr.columnHead
              td.ampers A:77777
              td.ampers B:2
              td.ampers C:1
              td.ampers D:2
            tr.columnBody
              td
                | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
        td
          table.inerTable
            tr.columnHead
              td A:1
              td B:2
              td C:?
              td F:!
            tr.columnBody
              td Text here
        td
          table.inerTable
            tr.columnHead
              td A:1
              td B:2
              td C:?
              td F:!
            tr.columnBody
              td Text here
        td
          table.inerTable
            tr.columnHead
              td A:1
              td B:2
              td C:?
              td F:!
            tr.columnBody
              td Text here
        td
          table.inerTable
            tr.columnHead
              td A:1
              td B:2
              td C:?
              td F:!
            tr.columnBody
              td Text here  
        td
          table.inerTable
            tr.columnHead
              td A:1
              td B:2
              td C:?
              td F:!
            tr.columnBody
              td Text here  
      tr.table
        td
          table.inerTable
            tr.columnHead
              td.ampers A:77777
              td.ampers B:2
              td.ampers C:1
              td.ampers D:2
            tr.columnBody
              td
                | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
        td
          table.inerTable
            tr.columnHead
              td A:1
              td B:2
              td C:?
              td F:!
            tr.columnBody
              td Text here  
        td
          table.inerTable
            tr.columnHead
              td A:1
              td B:2
              td C:?
              td F:!
            tr.columnBody
              td Text here  
        td
          table.inerTable
            tr.columnHead
              td A:1
              td B:2
              td C:?
              td F:!
            tr.columnBody
              td Text here
        td
          table.inerTable
            tr.columnHead
              td A:1
              td B:2
              td C:?
              td F:!
            tr.columnBody
              td Text here  
        td
          table.inerTable
            tr.columnHead
              td A:1
              td B:2
              td C:?
              td F:!
            tr.columnBody
              td Text here 

Так выглядит динамическая таблица, оно работает совсем не так, как надо.

h1.title Chart For #{item.category} #{item.name}
table.table
  tr.table
    td
      each chart,index in charts
        tr.columnHead
          td.ampers #{chart.amprage}
          td.ampers #{chart.confidence}
          td.ampers #{chart.pole}
          td.ampers #{chart.fuse}
        tr.columnBody
          td
            | #{chart.description}

CSS для таблици:

.table{
  border: 1px solid black;
  width: 144mm;
  text-align:center;
  display: flex;
  word-break: break-word;
 }

 .inerTable{
  width: 24mm;
  height:20mm;
  outline: 1px solid; /* use instead of border */
  display: flex;
  display: block;/* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
 }

 .columnHead{
   font-size: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 24mm;
   text-overflow: ellipsis;
   word-wrap: break-word;
   overflow: hidden;
   border-bottom: 1px solid grey;

 }

 .columnBody{
   font-size: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 2px;
 }

 .ampers{
 padding-right: 1px;
 }

 .title{
  text-align: center;
  margin-bottom: 1em;
 }

Помогите пожайлуйста размапить таблици в таблицу используя PUG.


Ответы (0 шт):