对table的设置及打印分页

最新推荐文章于 2025-10-06 06:35:25 发布
原创 最新推荐文章于 2025-10-06 06:35:25 发布 · 4.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#table #stylesheet #class #border #div

本文介绍了使用CSS来优化表格显示的方法，包括如何显示空单元格、设置细边框及控制打印分页等内容。通过具体代码示例展示了如何实现这些功能。

来自：http://www.w3school.com.cn/index.html

 

正确的引入 style:  <link rel="stylesheet" type="text/css" href="mystyle.css">

 

1.empty-cells: 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。

<table cellpadding="0" cellspacing="0" style="width:25CM;BORDER-COLLAPSE: collapse; empty-cells: show" >

</table>

 

2.设置打印分页：

  说明：page-break-after:always   控制分页

  .pageSeparator{visibility:hidden; page-break-after:always; overflow:hidden; height:0px;}

  <div class="pageSeparator"></div>

 

3.设置细边框 table

 

   .trborder {
        border-collapse:collapse;borderer:none;
        height:0.9CM
    }
    .trborder td{
        border:solid #FF3366 1px;
        font-size: 14px;
    }

  <table cellpadding="0" cellspacing="0" style="width:25CM;BORDER-COLLAPSE: collapse; empty-cells: show" >

     <tr class="trborder">

          <td>细边框</td>

          <td>细边框</td>

     </tr>

     <tr class="trborder">

          <td>细边框</td>

          <td>细边框</td>

     </tr>

  </table>

 

 

4.<pre></pre>: 标签很适合显示计算机代码.

使用lodop.js打印控件打印table并分页等.docx
11-23
使用 lodop.js 打印控件打印 table 并分页等 在本文中，我们将详细探讨使用 lodop.js 打印控件打印 table 并分页等的方法。lodop.js 是一个流行的 JavaScript 打印控件，常用于生成打印输出。 首先，我们需要了解 ...
JS 实现分页打印功能
01-19
在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。 每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。 page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。 page-break-before若设定成left，则会
page-break-after:always；解决window.print打印断页问题——已解决
热门推荐
yehaocheng520的博客
07-13 1万+
今天用户提出一个关于window.print()打印的问题： 如下图所示：在打印断页的部分，会出现数据打印不全的情况。打印预览与实际打印的情况还有有所区别。 注意一点：如果想要实现window.print()打印当前的页面，则想要保证打印页面的body的height必须为auto，否则只会打印第一页。还要注意一下权重问题。 @media print{ body { height: auto !important; } } html部分，之前用的是table，后面由于断页打印不全
Element UI表格数据打印：Table打印输出方案
最新发布
gitblog_00438的博客
10-06 818
在后台管理系统开发中，经常需要将Element UI的Table组件数据导出为纸质文档或PDF。本文将介绍三种实用的Table打印方案，从基础实现到高级自定义，帮助开发者快速解决数据打印需求。 ## 方案对比与选择建议 | 方案 | 实现难度 | 兼容性 | 自定义程度 | 适用场景 | |------|----------|--------|------------|----------| ...
利用js制作html table分页示例(js实现分页)
10-26
主要介绍了利用js制作html table的分页示例(js实现分页),需要的朋友可以参考下
Excel学习笔记：P12-打印分页设定
InnerPeaceHQ的博客
07-27 2044
文章目录前言一、设置分页符二、使用宽、高、缩放比例进行调整 前言 在打印Excel表格时，经常会遇到一些版面问题。Excel不像Word，直接可以从界面中看到打印的范围、边界的大小等。 一、设置分页符 现在我手上有一份记录200笔交易记录的表格，如图所示 现在我预览其打印界面，发现合计栏消失。 但是在从五页开始，发现合计栏单独在一页。 此时，我们首先进行分页预览，发现分页线未将最右边列包含进来。我们可以点击分页线，并进行拖动。同时，下方分页线包含一些四月份的信息，我们可以往上拖动，使得这一页只包含
vue 表格分页打印，字体自适应大小缩放。
weixin_40992252的博客
04-29 1759
因表格内字数不确定，1页强制10行，有的页面很短，有的页面会超出，效果不好，需要每个单元格内大小自适应表格调整。通过计算每个单元格的大小、可容纳的文字数量与实际的文字数量的比例来动态控制每个单元格内文字的缩放比例。(3）同时要注意，字母，数字，英文标点符号，占的比例应该为字体的0.6倍左右，需要处理。单元格内字数如果超过可能容纳最多的字数，那么字体需要缩小，如果不超过，那么不需要缩小。如果字体大小超过默认字体大小，不需要改变，如果小于默认字体大小就是需要缩小的。(1) 计算每个单元格容纳的标准字体个数。
JS 分页打印
℡メ㏑╭ァ小凯
05-16 1507
在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。在样式中有规定几个打印的样式page-break-before和page-break-afterCSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Pa...
vue的分页打印功能
weixin_44185923的博客
02-09 645
vue分页打印.打印时表头的截取,打印间距
bootstrap-table后端分页功能完整实例
11-20
本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考，具体如下： 使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css <link rel="stylesheet" href="../plugins/...
js控制分页打印、打印分页示例
12-02
代码如下: <%... charset=UTF-8″ pageEncoding=”UTF-8″%> <!... <HEAD>...javascript打印-打印页面设置-打印预览代码</TITLE> <META http-equiv=Content-Type content=”text/html
Web分页打印 细线表格+分页打印之终极攻略
12-14
最近给客户做打印的时候，客户提出打印时不要打印该页面的头，只是打印表格里面的内容，因为头部有背景和打印按钮，而且要细线表格的那种，我想细线表格不是很简单吗 如果你还不知道细线表格怎么做，请看下面的代码...
jqprint可分页打印页面内容
12-09
利用jquery插件jqprint打印当前页面的标签内容，自动换页，包含jar包，js，java代码。
js实现打印，可以自动分页！
03-04
js打印,将数据读取到打印页面，用js截取，从而实现打印指定模块！打印的时候如果页面数据过多，打印机可以自动分页打印！我的是hp的打印机，下载的朋友可以试试！注意，本人声明：这个并不是针对于打印分页而写，只是普通的js打印！
vue+antd——实现table表格的打印——分页换行，每页都有表头——基础积累
yehaocheng520的博客
09-08 4276
vue+antd——实现table表格的打印——分页换行，每页都有表头——基础积累
js设置html打印不分页,JS 使用 window对象的print方法实现分页打印功能
weixin_34304211的博客
06-18 1081
最近做项目用到了web在线打印功能，经研究使用了JS自身支持的Window对象的打印方法，此种方法兼容性比较好，在IE和火狐浏览器下使用都没有问题。1.但是网上好多案例都不支持分页功能，最后通过CSS的page-break-after:always样式解决分页问题，以下代码纯个人编写，有需要的朋友可以直接复制到网页中使用，转载请注明出处，谢谢！无标题文档//打印代码function Print()...
在打印HTML页面时控制分页
TSD的专栏
12-06 1755
CSS：page-break-after, page-break-beforePAGE：br.pageEnd {page-break-after:always}需要强制分页的地方用：
page-break-before和page-break-after 实现分页打印
CrazyFlyingBee的博客
12-20 1055
page-break-before和page-break-after 实现分页打印
js解决打印时tabel表格不被截断，实现表格自动分行
qq_50796105的博客
02-28 7185
问题描述：要求打印tabel时能正常打印，当表格数据过多或者某个表格中字数太长，导致打印被强制截断 如图：
table打印根据行数分页
08-28
在进行table打印时根据行数分页可以从前端和后端不同角度来实现： ### 前端实现 在Vue + Antd的场景下，要实现table表格打印时根据行数分页且每页都有表头，可按以下步骤操作： 1. **HTML结构**：确保使用`thead`和`tbody`标签，以保证每页都能显示表头。示例代码如下： ```html <table> <thead> <tr> <th>列1</th> <th>列2</th> <!-- 更多列 --> </tr> </thead> <tbody> <!-- 表格数据行 --> </tbody> </table> ``` 2. **CSS样式**：为`table`添加特定的CSS属性，利用`page-break-inside`、`page-break-after`和`page-break-before`属性来控制分页。示例代码如下： ```css table { page-break-inside: auto; } tr { page-break-inside: avoid; page-break-after: auto; } thead { display: table-header-group; } ``` 3. **JS代码**：通过JavaScript计算行数并根据需要进行分页处理。示例代码如下： ```javascript // 假设这里获取到表格的tbody元素 const tbody = document.querySelector('tbody'); const rows = tbody.rows; const rowsPerPage = 10; // 每页显示的行数 for (let i = 0; i < rows.length; i++) { if (i % rowsPerPage === 0 && i > 0) { // 在指定行数处插入分页符 const pageBreak = document.createElement('div'); pageBreak.style.pageBreakAfter = 'always'; tbody.insertBefore(pageBreak, rows[i]); } } ``` ### 后端实现 后端可以借助一些工具和技术来实现根据行数分页打印。例如，使用Selenium在不打开浏览器的情况下渲染页面，并将需要打印的部分转为图片（base64码）。具体步骤如下： 1. 后端循环将单个数据传入打印模板页面。 2. 使用Selenium在不打开浏览器的情况下渲染页面。 3. 在页面中使用`html2canvas`将要打印的部分（如一个`table`）转为图片（base64码）。示例代码如下： ```python # 伪代码示例，使用Python和Selenium from selenium import webdriver from selenium.webdriver.chrome.options import Options import base64 from PIL import Image import io # 设置Chrome为无头模式 chrome_options = Options() chrome_options.add_argument('--headless') driver = webdriver.Chrome(options=chrome_options) # 打开打印模板页面 driver.get('your_print_template_url') # 假设这里有循环处理数据的逻辑 for data in your_data_list: # 将数据传入页面 # ... # 使用html2canvas将table转为图片 script = """ const table = document.querySelector('table'); html2canvas(table).then(canvas => { return canvas.toDataURL('image/png').split(',')[1]; }); """ base64_image = driver.execute_script(script) # 处理图片数据 img_data = base64.b64decode(base64_image) img = Image.open(io.BytesIO(img_data)) # 可以在这里进行分页处理和打印操作 # ... driver.quit() ```
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值