打印页面样式设计 控制一个table显示在一页上

最新推荐文章于 2022-06-16 17:58:45 发布
原创 最新推荐文章于 2022-06-16 17:58:45 发布 · 928 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在基于PHP的网页中进行页面样式设计，确保一个表格在打印时能完整显示在一页之内，避免内容被截断。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

此页面是基于php的基础写的……

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <style>
            p{line-height: 0;margin: 0;}
            .h1-center{ text-align: center;font-size:28px;font-weight:bold;}
            .table-printer{ width:100%;margin:10px auto;border-collapse: collapse; border-spacing: 0;border:2px solid #000;background:#FFF;border-left: 0;border-top:0;}
            .table-printer td{border:2px solid #000;border-bottom: 0;border-right: 0;text-align: center;}
        </style>
    </head>
    <body>
        <?
        //智能分页
        $pagesize = 12;
        $lessons_array_chunk = array_chunk($lessons, $pagesize);
        ?>       
        <? $config = json_decode($paynote->config); ?>
        <? foreach ($lessons_array_chunk as $p => $les): ?>
            <div  style="margin:60px auto 0 10px;" style="height:940px;">
                <? if ($p == 0):  ?>
                    <div class="h1-center"> <? echo $team->name ?>班级点名册 </div>
                    <? if ($this->input->get('action')=='debug') echo $paynote->lesson_start_time; ?>
                    <div style="text-align: right;margin-top:6px;">有效学习周期：<? echo date('Y.m.d', $paynote->lesson_start_time) . '-' . date('Y.m.d', $paynote->lesson_end_time) ?></div>
                <? endif; ?>
                <table class="table-printer">    
                    <thead>
                        <? if ($p == 0): ?>
                            <tr>
                                <td colspan="25">
                                    <table width="100%">
                                        <tr>
                                            <th align="left">上课时间：周<? echo element($team->week, $this->base_config_model->config_item('week')) ?> <? echo sumtime($team->start_hour, $team->start_minute, $team->unit_time) ?>，时长：<? echo $team->unit_time; ?>分钟
                                                    
                                                上课地点：<? if ($classroom = $this->base_classroom_model->cache_by_id($team->classroom_id)) echo $this->base_school_model->cache_by_id($classroom->school_id)->name.$classroom->name; ?></th>
                                            <th align="right">任课老师：<? if ($teacher = $this->base_user_model->cache_by_id($team->teacher_id)) echo $teacher->name ?></th>
                                        </tr>
                                    </table> 
                                </td>
                            </tr>
                        <? endif; ?>
                        <tr>
                            <td width="40">序号</td>
							<td width="60">学号</td>
							<? if ($p == 0): ?>
								<td width="70">学费单号</td>
							<? endif; ?>
							<td width="70">姓名</td>
							<td width="100">联系电话</td>
                            <? foreach ($les as $le): ?>
                                <td style="text-align:center;">
                                    <?
                                    //时区有BUG
                                    date_default_timezone_set('PRC');
                                    if ($this->input->get('action')=='debug') echo $le->start_time;
                                    if ($le->start_time) {
                                        echo date('m.d', $le->start_time);
                                    } else {
                                        echo element($le->classify, $this->base_config_model->config_item('lesson_classify'));
                                    }
                                    ?>
                                </td> 
                            <? endforeach; ?>
                        </tr>
                    </thead>
                    <tbody>
                        <?
                        $n = 1;
                        foreach ($students as $student):
                            ?>
                            <tr>
                                <td height="30"><? echo $n ?></td>
                                <td><? echo $student->sn ?></td>
                                <? if ($p == 0): ?>
                                    <td><? if ($student->paynote_detail) echo $student->paynote_detail->pay_sn ?></td>
                                <? endif; ?>
                                <td><? echo $student->name ?></td>
                                <td>
                                    <? echo $student->mobilephone ?>
                                    <? if ($student->telephone) echo '<br/>' . $student->telephone; ?>
                                </td>
                                <? foreach ($les as $le): ?>
                                    <td> </td>
                                <? endforeach; ?>
                            </tr>
                            <?
                            $n++;
                        endforeach;
                        ?>
                    </tbody>
                    <? if ($p == 0): ?>
                        <tfoot>
                            <tr>
                                <td colspan="25" style="height:30px;text-align: left">
                                    <? echo $team->unit_price ?>元/课时，共<? echo $paynote->lesson_num ?>次课，计<? echo $paynote->price ?>元 <? if (isset($config->cailiaofei) && $config->cailiaofei) echo '（含' . $config->cailiaofei . '元材料费）'; ?>
                                </td>
                            </tr>
                        </tfoot>
                    <? endif; ?>
                </table>
                <? if ($p == 0): ?>备注：<? endif; ?>
				
            </div>
            <div style="page-break-after:always;"> <br/></div>
        <? endforeach; ?>
    </body>
</html>

【效果预览】





vue实现分页打印，表格与封面会自动各占一个模板页面同时实现打印多条数据，并且有两种实现打印的方式完整示例
m0_59505309的博客
02-14 870
vue实现分页打印，表格与封面会自动各占一个模板页面同时实现打印多条数据，并且有两种实现打印的方式完整示例
asp.net报表打印(table方式)
08-19
报表打印，用Table画的.大家有空可以看看，可以运行的，我已经调试好了
网页打印A4纸-----表格在跨页时自动换页打印的实现
weixin_34292287的博客
02-05 980
在最近所做的一个项目中，需要通过网页来打印不少的表单，但是又不想每个打印页签各占用一个页面，这样就需要生存很多不同的冗余页面，为了减少冗余，所有的表单通过jquery的页签tab来实现的。 一 ：基本打印的实现： 　　　　　　1：tab页签在切换时的change事件中，记住每个页签的index, 　　　　　　2：在点击打印按钮时，根据所记住的index,由页签的id("tab名+index"...
在ASP.NET2.0里打印网页指定的内容（比如打印网页里的一个Table）
weixin_30920853的博客
04-28 142
在ASP.NET2.0里打印网页指定的内容（比如打印网页里的一个Table） 原文:在ASP.NET2.0里打印网页指定的内容（比如打印网页里的一个Table）打印指定内容： <html> <head> <script type= "text/javascript " language= "javascri...
excel打印预览在哪里_别再浪费A4纸了，Excel按下这个键，一张纸可以打印全部表格内容...
weixin_39738152的博客
11-18 1997
我们在工作和生活中，经常需要打印Excel表格，可是有时表格太宽了，无法打印在一张A4纸上，今天就来教大家几种方法，只需按下一个键，就可以打印全部表格内容。一、表格打印一页1.设置分页首先点击【视图】-【分页预览】，在Excel表格中会显示第一页打印范围，我们拖动紫色的线条，让它覆盖整个表格，最后按下【Ctrl+P】进入打印预览，这样表格都被打印在一页了。2.调整宽高首先全选表格内容，点击【页面布...
div 设置a4大小_CSS设置A4纸张尺寸
weixin_39531635的博客
12-18 1000
CSS设置A4纸张尺寸我需要在网络上模拟A4纸，并允许打印此页面，因为它在浏览器上显示(特别是Chrome)。我将元素大小设置为21cm x 29.7cm，但是当我发送到打印(或打印预览)时，它会剪切我的页面。看到这个实例！body{margin:0;padding:0;background-color:#FAFAFA;font:12pt"Tahoma";}*{box-sizing:...
仅在页脚部分的最后一页的最底部打印表格页脚
04-03
标题 "仅在页脚部分的最后一页的最底部打印表格页脚" 描述了一个常见的网页打印问题，即如何确保页脚只在打印预览的最后一页面的底部出现，尤其是在页面内容动态变化时。这个问题涉及到HTML、CSS、JavaScript以及...
js或jquery实现页面打印可局部打印
10-26
在Web开发中，有时我们需要提供用户一个功能，即能够从网页上打印特定的内容，而不是整个页面。本文将详细介绍如何使用JavaScript（以及jQuery库）来实现这样的局部打印功能。 首先，我们来看一下**纯JavaScript**...
ASP控制每页打印行数
10-30
本文将详细解析一个具体的案例：“ASP控制每页打印行数”。通过分析提供的代码片段，我们可以了解到如何在ASP中设置每页打印的行数，并深入探讨相关知识点。 #### 一、基本概念 1. **ASP**: Active Server Pages ...
td/td标签的border 样式在浏览器中显示不出来的解决方法
12-13
然而，在实际应用中，开发者有时会遇到一个常见的问题，即在某些浏览器环境下，如360浏览器的兼容模式下，当`<td>`标签中的内容为空时，为其设定的`border`样式无法正常显示。这个问题可能对页面的视觉效果造成影响...
css打印适应纸张_css – 如何在特定纸张上打印
weixin_34405084的博客
02-23 141
我已经使用FPDF类为我的标签创建了一个pdf.require_once ABSPATH . '/path/to/fpdf.php';class PDF_MC_Table extends FPDF{var $widths;var $aligns;function SetWidths($w){//Set the array of column widths$this->widths=$w;}f...
页面打印表格换页问题
ravenYoung的博客
06-16 2567
在打印一个html页面时，会出现table数据过长，需要分多个页面打印，这时候会出现一行切成两行，导致表格行错乱。
HTML打印每一页都有固定的头部
sakura的博客
09-29 1492
HTML打印每一页都有固定的头部 ​ 业务需求是这样的，在对这个表格进行打印的时候，考虑到这个表格会有很多行，万一超过了这一页希望保留左上角的公司logo和右上角的公司名称等信息，但是表格上面的“客户名称”等相关信息就不需要了。 ​ 解决这个问题有从这几个角度出发，这有点类似页眉和页脚的设置。给整个页面设置页边距。但是这个实际上会把整个的边距减小以至于挤掉本来左上角和右上角的logo位置。 @page{ //这个margin根据实际去调整。 margin: 20
如何让表格（table）充满整个页面
mydeman的学习日志
07-17 2万+
        在开发过程中遇到了这个问题，需要将表格充满这个页面，实际的表格并没有那么高，于是使用如下代码设置：     test1     test1        但是表格并没有想象中的那样铺满这个页面，无论怎么调整都不行。此处是不能使用固定像素的高度的，因为那样将会随着屏幕分辨率的变化而变得非常难看。        最后只有借助于Google，将代码改为：              tes
用HTML中的列表标签做一个导航栏吧
热门推荐
12-11 2万+
我们在网上浏览的好多网页都有导航栏,它提供信息导航的功能,想知道它是怎么做出来的吗? 首先要知道的:HTML中的列表标签都有那些呢? ul-li无序列表 ( 网页中显示的默认样式一般为：每项 li 前都自带一个圆点 ) 语法: <ul> <li>文本</li> <li>文本</li> </ul>2.ol-li有序列表(在网页中显示的默认样式一般为：每项 li 前都自带一个序
lodop设置table边线为细线，及如何使用style样式
weixin_34279246的博客
03-11 1908
2019独角兽企业重金招聘Python工程师标准>>> ...
对数据进行分页，显示到table中。
(Java)
08-22 1万+
我最先用jframe编程的时候写的比较简单，只是先查询到所有记录，再根据当前页码筛选出当前页的记录，返回的小集合可以直接显示到table上。 import java.util.ArrayList; import java.util.List; import com.yu.entity.User; public class PageController { private List
javaScript使用Lodop实现网页表格套打功能
红桃峰峰 的博客
04-06 8858
一、引入Lodop的js LodopFuncs.js文件从Lodop官网的范例中获得：http://www.lodop.net/LodopDemo.html 二、增加套打的按钮 三、完成js功能 function taoda() { CreateDataBill(); LODOP.PREVIEW(); }; function
使用printJS实现打印时页面中table未完全展示在A4纸上
最新发布
12-28
此时应考虑启用分页功能并控制每一页的内容分布： ```css table { page-break-inside: avoid; /* 防止表格被拆分成多页 */ } tr { page-break-inside: avoid; /* 行内不允许断页 */ } thead { display: table-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值