Как установить страницу предварительного просмотра при зацикливании данных
Это моя страница предварительного просмотра перед печатью, так как вы можете видеть, как данные переходят на следующую страницу. Как мне поступить, тогда данные будут зацикливаться на одной странице?
Например, на следующем рисунке показан макет, который я хочу сделать, данные будут зацикливаться на той же странице, если страница заполнена, она начнет зацикливаться на следующей странице.
Код моей страницы для печати
<!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">善信编号 名字</b>
<b style = "margin-left: 290px; font-size: 20px">善信编号 名字</b>
<b style = "margin-left: 290px; font-size: 20px">善信编号 名字</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> {{$item->xylight_label}}</span>
</li>
</ul>
@endforeach
</div>
</td>
</tr>
</tbody>
Страница 2
@4givN Это не работает в <table>, все равно будет переходить на следующую страницу
Ответы 1
css column-count может решить вашу проблему.
прикрепите к тегу div, охватывающему ваши теги h1 или теги ul li.
<div style = "column-count: 3;">
</div>
Он разделит содержимое внутри этого div на три столбца с одной и той же страницей. ВЫ можете увидеть демо (jsfiddle)
Вы можете использовать тег ul, li с удалением стиля маркера на none, чтобы получить упорядоченные результаты. Вы можете увидеть демо (jsfiddle)
Это полезно для моего вопроса, теперь есть еще одна проблема: мои значения также не сортировались.
X00027 является частью тега li?, также под сортировкой, что вы имеете в виду, сортировать по номеру или выравнивание не начинается с той же строки
Это похоже на пробел между X00027 и X00039 , в моей базе данных не было пустых данных, но когда данные переходят на следующую страницу, они отображаются отлично. Я обновил изображение страницы 2
есть несколько вещей, которые я рассматриваю, сначала выньте тег ul за пределы цикла, посмотрите, работает ли он, если он не работает, попробуйте добавить свойство css column-width: auto; в тег ul
отображать их внутри <table><tr><td> вместо <h1>, не добавлять границу для ячейки таблицы