其实我设计的纸张尺寸是A4,
如何使用 css 和 PHP 将表格行自动移动到下一页,如果行不能适合当前页面
<style>
body{width:100%; height:100%;margin:0;padding:0;font:12pt Tahoma}*{box-sizing:border-box;-moz-box-sizing:border-box}
.page{width:210mm;min-height:297mm;padding:10mm;margin:10mm auto;border:1px #D3D3D3 solid;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,0.1)}
.subpage{height:257mm;}
@page{size:A4;margin:0}
@media print{html,body{width:210mm;height:297mm}.page{margin:0;border:initial;border-radius:initial;width:initial;min-height:initial;box-shadow:initial;background:initial;page-break-after:always} } </style>
HTML代码是
<div class="book">
<div class="page">
<div class="subpage">
</div>
</div>
</div>
请帮助解决我的问题。提前谢谢你。
最佳答案
CSS 代码
<style>
body
{
width:100%; height:100%;margin:0;padding:0;font:12pt Tahoma
}
*{
box-sizing:border-box;-moz-box-sizing:border-box
}
.page
{
width:210mm;min-height:297mm;padding:10mm;margin:10mm auto;
border:1px #D3D3D3 solid;border-radius:5px;
box-shadow:0 0 5px rgba(0,0,0,0.1)}
.subpage{height:257mm;
}
@page{ size:A4;margin:0 }
@media {
print{
html,body{width:210mm;height:297mm}.page{margin:0;
border:initial;border-radius:initial;width:initial;
min-height:initial;
box-shadow:initial;background:initial;page-break-after:always
} }
</style>
库文件
<script src="/lib/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<div class="book" > </div>
脚本行
<script type="text/javascript">
function a4_page(name, sub_title, height) {
var rowCount = $('#myTable tr').length;
var count = 1;
var tr_height = 0;
var html_data = "";
var page = 1
var head = $('#myTable tr').eq(0).html();
while (count < rowCount) {
if (tr_height == 0) {
html_data = html_data + '<div class="page"><div class="subpage"><table width="100%" border="0" style="line-height:22px;"><tr><td><strong style="font-size:20px;">' + name + '</strong><br><strong style="font-size:13px;font-weight:100;">' + sub_title + '</strong></td><td> </td><td align="right" style="font-size:13px;"><strong>Print:</strong> <?php echo date("d/m/Y h:i:s A"); ?><br /><strong>Page:</strong> ' + page + '/<span class="total_page"></span><br><?php echo $fdate; ?> - <?php echo $tdate; ?></td></tr></table><hr style="width:100%; border:2px #000000 solid;" /><table style="table-layout:fixed;word-wrap: break-word; width:715px;border:0px #FFFFFF; font-size:12px; line-height:24px;" rules="all" border="0" >' + head;
}
tr_height = tr_height + $('#myTable tr').eq(count).height();
html_data = html_data + '<tr >' + $('#myTable tr').eq(count).html() + '</tr>';
if (tr_height > (height || 800)) {
html_data = html_data + '</table></div></div>';
tr_height = 0;
page++;
}
count++;
}
$(".book").append(html_data);
$("#myTable").hide();
$(".total_page").html(page);
}
</script>
示例表
<table style="table-layout:fixed;width:700px;border:0px #FFFFFF; font-size:12px; word-wrap: break-word; " rules="all" border="0" id="myTable" >
<tr>
<td width="100"> </td>
<td width="100"> </td>
<td width="100"> </td>
<td width="400"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
试试这个....
关于php - 如何使用 CSS 和 PHP 根据纸张大小构建表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34836021/