How do you get a single table column to continue onto next column of page instead of one column on e-CodePudding

I am trying to design a pdf view page for product labels in asp.net mvc c#. Basically, I want there to be two columns on the page with 5 rows (so 10 total labels per page). Based on a form where certain products are selected, the form pulls up the pdf view of the labels (which I use Rotativa for) and it inserts the products selected from form into the labels to print. I have it working perfectly as far as getting the data to the labels, but its only displaying as a single column per page. I'd like after the column on each page reaches the end of the page, instead continuing onto the next page, it flows over to the next column on page. I tried doing another section and copied the same fields to it from column one but it just shows the same duplicate record per row. I've tried alot of different things I've read online and none of it is working such as display: block or block-inline, I've tried in css setting column-count: 2;. Everything I'm finding online they have multiple fields or columns. I have just one . It's weird that it repeats all the way down the page on the left half of the page but won't continue onto the right half. Here's a basic example of what I want:

[ label from record 1 ] [ label from record 6 ]
[ label from record 2 ] [ label from record 7 ]
[ label from record 3 ] [ label from record 8 ]
[ label from record 4 ] [ label from record 9 ]
[ label from record 5 ] [ label from record 10]
(end of page 1)

I've been stuck on this for a couple days now, any help would be greatly appreciated. Here is my code so far:

   <table>
     @foreach (var item in Model)
     {
       <tr>
         <td >
           <img src="@Server.MapPath("~/Images/"   item.Logo)" ><br />
           <label >Item #</label><br />
           <label >@Html.DisplayFor(modelitem => item.Product_Code)</label><br />
           <label >@Html.DisplayFor(modelitem => item.Description)</label>
         </td>
       </tr>
     }
   </table>

CodePudding user response：

since you said it doesnt need to be a html table tag in the comment, you can do something like this, where you wrap all the elements in a div and set the div to display grid. grid template columns says how many columns you want and there widths. In this case i set them to 1fr 1fr which will make 2 columns with equal widths. If you want something different you can specify the width in pixels or percentages. This is the same with grid-template-rows.

<style>
.grid{
display:grid;
grid-template-columns: 1fr 1fr;
grid-template-rows:1fr 1fr 1fr 1fr 1fr;
justify-content:start;
width:max-content;
}
</style> 
<div >
@foreach (var item in Model)
     {
         <span >
           <img src="@Server.MapPath("~/Images/"   item.Logo)" ><br />
           <label >Item #</label><br />
           <label >@Html.DisplayFor(modelitem => item.Product_Code)</label><br />
           <label >@Html.DisplayFor(modelitem => item.Description)</label>
         </span>
}
   </div>