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.