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

Question

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第2页

Answer 1

css property column-count can solve your problem. css 属性column-count可以解决你的问题。 attach to the div tag enveloping your h1 tags or ul li tags.附加到包含 h1 标签或 ul li 标签的 div 标签。

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

It will separate the contents inside this div into three columns with the same page.它将这个 div 内的内容分成三列，具有相同的页面。 YOu can see demo(jsfiddle)你可以看到演示（jsfiddle）

You can use ul, li tag with removing bullet style to none to get ordered results.您可以使用 ul, li 标签将项目符号样式删除为 none 以获得有序结果。 You can see demo(jsfiddle)你可以看到演示（jsfiddle）

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-12-11 06:20:50

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-12-11 06:20:50

解决方案1
3 已采纳 2020-12-11 06:20:50