jquery - 数据表打印问题 - 分页符前的奇怪行

标签 jquery css printing datatable css-tables

我正在尝试打印一个经过修改设计的表格,其中每个表格行都包装在 Bootstrap “col-xs-3”类中,每 4 个“col-xs-3”都包装在“行”类中,如下所示,

问题是当我尝试打印此页面时,它在图像中显示的每个页面中留下了有线的小线。我的 CSS 分页如下 -

.row { 
  page-break-inside:avoid; 
  page-break-after:auto; 
}

enter image description here

示例 fiddle 链接如下,我该如何解决?提前致谢。

https://jsfiddle.net/Lr77dgmt/1384/

最佳答案

您走在正确的道路上。 您只需要为每第 3 行添加一个分页符。鉴于从第二页开始可以容纳 4 行而不是 3 行,您可以执行如下操作。我们首先只为第 3 行定义一个规则,然后我们可以定义一个适用于每 4 行 + 3 的规则,以跳过前 3 行。

.row:nth-child(3) {
  page-break-after: always;
}

.row:nth-child(4n + 3) {
  page-break-after: always;
}

我已经用这个更新了 fiddle 并添加了更多行来模拟更多页面。

https://jsfiddle.net/Lr77dgmt/1399/

关于jquery - 数据表打印问题 - 分页符前的奇怪行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49891736/

相关文章:

jQuery 更改类以列出链接 onclick

android - 在 Android 蓝牙热敏打印机的同一行上打印两个不同的文本对齐方式

javascript - 依赖/级联下拉菜单

javascript - jQuery:在每个 <p> 的最后一个单词之前插入 "&nbsp;"

css - 在 scss 的计算中使用媒体查询

printing - Lua 在文件读取之前不打印

html打印页面,额外打印空白页

javascript - p 造型没有出现。一个一个打出来

javascript - 在angularJS中使用动态数组填充复选框

jquery - 将移动友好网站重定向到桌面客户端