I follow this article to subsitute a table with div but I am not able to create a unique merged div header as shown in the attached image:
How to do??
.Table { display: table; position: absolute; top: 10px; right: 0; bottom: 0; left: 0; width: 100%; }
.Title { display: table-caption; text-align: center; font-weight: bold; font-size: larger; } .Heading { display: table-row; font-weight: bold; text-align: center; } .Row { display: table-row; } .RowGroup { display: table-row; color: blue; background-color: lightgrey; text-align: center; height: 33px; /*position: absolute;*/ } .Cell { padding-top: 5px; display: table-cell; border-bottom: 1px solid; border-color: lightgrey; padding-right: 5px; height: 30px; } .CellHeader { padding-top: 5px; display: table-cell; border-bottom: 1px solid; border-color: lightgrey; height: 33px; background-color: lightgrey; } </style>
Prodotto
qta
@{int c = -1; } @foreach (var m in Model) { c = c + 1; { if (old_IDacc != m.IDaccount || old_dataCons != m.DataCons) { <div class="RowGroup"> <div> <p style="page-break-before:always">@Model[c].NomeAccount</p> </div> </div> } }
<div class="Row"> <div class="Cell"> <p>@Model[c].Prodotto</p> </div> <div class="Cell"> <p>@Model[c].Qta</p> </div> </div> } </div>
Thanks and regards