How to set the page of print preview when looping data

This is my print preview page, as you can see the data looping to the next page. How should I do then the data will loop in same page?

For example, the following figure shows the layout I want to do, the data will loop in same page, if full of the page , it will start loop to next page

My Print Page Code

<!DOCTYPE html>
<html>
<head>

<title>This is a print page!</title>
</head>
<style>

</style>
<body>
@foreach ($xyprintPreview as $item)
      <h1>{{ $item->xy_sx_ID}}</h1>
@endforeach
</body>
</html>

New Updated Pic

New Updated Coding

<body>
<table class="report-container" style="width: 100%">
<thead class="report-header">
  <tr>
     <th class="report-header-cell">
        <div class="header-info mt-3">
            <h4 style="text-align: center;">
              <img src="https://scontent.fmkz1-1.fna.fbcdn.net/v/t31.0-8/o.jpg?_nc_cat=111&ccb=2&_nc_sid=09cbfe&_nc_ohc=gLnsAI4ON1MAX98YpzP&_nc_ht=scontent.fmkz1-1.fna&oh=bacd1bd15cf7a118af57abe52bf7e07e&oe=5FFAAEC0" alt="Avatar" style="width:60px">
              柔佛古庙许愿灯登记名单‎({{$year}}年‎)‎
            </h4>
            <hr style="border: 1px solid;">
                 <b style="margin-left: 180px; font-size: 20px">善信编号&nbsp;&nbsp;名字</b> 
                 <b style="margin-left: 290px; font-size: 20px">善信编号&nbsp;&nbsp;名字</b>
                 <b style="margin-left: 290px; font-size: 20px">善信编号&nbsp;&nbsp;名字</b>   
        </div>
      </th>
   </tr>
 </thead>
 <tfoot class="report-footer">
   <tr>
      <td class="report-footer-cell">
        <div class="footer-info mb-3">
          
        </div>
       </td>
   </tr>
 </tfoot>
 <tbody class="report-content ">
    <tr>
      <td class="report-content-cell">
         <div class="main" style="column-count:3; margin-left: 180px;">
            @foreach($xyprintPreview as $item)
            <ul>
                <li>
                  <span style="font-size: 20px"><b>{{$item->xy_sx_ID}}</b>&nbsp;&nbsp;{{$item->xylight_label}}</span>
                </li>
            </ul>
            @endforeach
         </div> 
     </td>
    </tr>   
  </tbody>

Page 2

Solution

css property column-count can solve your problem. attach to the div tag enveloping your h1 tags or ul li tags.

<div style="column-count: 3;">
</div>

It will separate the contents inside this div into three columns with the same page. YOu can see demo(jsfiddle)

You can use ul, li tag with removing bullet style to none to get ordered results. You can see demo(jsfiddle)