循环数据时如何设置打印预览的页面

Question

这是我的打印预览页，您可以看到数据循环到下一页。我应该怎么做，然后数据会在同一页循环？

比如下图就是我要做的布局，数据会在同一页循环，如果满页就开始循环到下一页

我的打印页面代码

<!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>

新更新图片

新更新编码

<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>

第 2 页

Answer 1

css 属性 column-count 可以解决你的问题。附加到包含您的 h1 标签或 ul li 标签的 div 标签。

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

它将div里面的内容分成三栏，同页。你可以看到 demo(jsfiddle)

您可以使用 ul、li 标签并删除 none 的项目符号样式以获得有序结果。可以看到demo(jsfiddle)

循环数据时如何设置打印预览的页面

How to set the page of print preview when looping data

html

print-preview

laravel