循環數據時如何設置打印預覽的頁面

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 內的內容分成三列，具有相同的頁面。 你可以看到演示（jsfiddle）

您可以使用 ul, li 標簽將項目符號樣式刪除為 none 以獲得有序結果。 你可以看到演示（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