将多页html表格合并到一个页面中以节省纸张

Question

我有超过html表格的40+行，跨越2-3页。我在表格中只有两个小列，所以我想通过在一页中合并两个页面的表格数据来充分占用页面中的空间，以便在打印时节省纸张。比方说，如果第24行是第一页的最后一行，我希望第25行出现在截图所示的同一页的第二页列(而不是表列)中。

我使用了Yii2框架的Gridview来呈现数据。生成的html如下所示。

<div id="w0" class="grid-view"><div class="summary">Total <b>50</b> items.</div>
<table class="table table-striped table-bordered"><thead>
<tr><th>Appt.#</th><th>Patient Name</th><th>User Phone No</th></tr>
</thead>
<tbody>
<tr data-key="93"><td>1</td><td></td><td>abc</td></tr>
<tr data-key="94"><td>2</td><td></td><td>xyz</td></tr>
.
.
.
</tbody></table>
</div>

​

​

Answer 1

您可以尝试使用列呈现容器，但是支持非常不稳定。

@media print
{
   #w0
   {
      -webkit-column-count: 3;
      -webkit-column-gap: 20px;
   }
}