表格行分成两页(打印媒体)

2024-06-28

I have a table which is OK in web pages, but when printing my table (ctrl+p) it breaks not the way I want. The last row of the first page splits with the part of the row on the first page and the other part of the row on the second page. So, is there any way to overcome the problem, the rows can have different content and size. I also tried this properties

 page-break-before/after: auto. page-break-inside:avoid;

但没有结果。有没有办法打破表格并将表格的一部分移动到下一页,而不将最后一行分成打印介质的两部分?任何帮助将不胜感激。

表,th,td { 边框:1px纯黑; 边框折叠:折叠; } th,td { 内边距:5px; }

</style>
</head>
<body>
<table style="width:100%;">
<tr>
  <th><span>Firstname</span></th>
  <th><span>Lastname</span></th>      
  <th><span>Points</span></th>
</tr>
<tr>
  <td><span>Jill</span></td>
  <td><span>Smith</span></td>     
  <td><span>50</span></td>
</tr>
<tr>
  <td><span>Eve</span></td>
  <td><span>Jackson</span></td>       
  <td><span>94</span></td>
</tr>
<tr>
  <td><span>John</span></td>
  <td><span>Doe</span></td>       
  <td><span>80</span></td>
</tr>
   /*here I have many <tr> elements*/
</table>

</body>
</html>

如果我理解正确的话,您希望表格仅在行之间而不是在行内中断。您可以使用以下 css 规则在 Firefox 和 Internet Explorer 中完成此操作:

tr {page-break-inside: avoid;}

不幸的是,这在其他流行的浏览器(例如 Chrome)中不起作用。

正如所建议的,您可以通过将单个单元格的内容包装在具有“page-break-inside:avoid;”的 div 中来防止其内分页。设置它,但如果行内的内容高度不同,您仍然会在两个不同的页面上看到该行的部分内容。

If you really想要解决这个问题并且愿意投入一些javascript,我在这里发布了一个解决方案 https://stackoverflow.com/questions/7211229/having-google-chrome-repeat-table-headers-on-printed-pages/25737442#25737442这应该够了吧。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

表格行分成两页(打印媒体) 的相关文章

  • 推迟内联 JavaScript 执行? [复制]

    这个问题在这里已经有答案了 在我的网站中 我有许多内联 JavaScript 片段 其中大多数都需要 jquery 和类似的东西 但我想将 jquery 加载推迟到页面渲染之后 这意味着 我的内联 javascript 将在加载 jquer
  • 如何将-webkit-gradient应用到IE上?

    我有以下 CSS 代码 webkit gradient linear left bottom left top from 5AE to 036 Chrome 中的背景显示效果非常好 Internet Explorer 仅显示白色背景 我尝试
  • AngularJS动画卡片翻转

    我正在尝试使用新的 AngularJS 方式在页面转换之间制作动画 并希望合并卡片翻转 例如http jsfiddle net nicooprat GDdtS http jsfiddle net nicooprat GDdtS body b
  • 为什么 Chrome 80 会导致这个 grid-template-rows: auto 问题

    有人知道最新的 Chrome 80 更新有什么变化吗 似乎 grid template rows auto 即使标记中不存在给定行 从现在开始也会占用一些空间 仅发生在 Chrome 80 上 l page display grid gri
  • Chrome - 儿童剪辑CSS3圆形边框?

    请参阅以下 JSFiddle http jsfiddle net zScKW http jsfiddle net zScKW 请注意 子 div 剪裁了其父 div 的边框 如果我删除边框 但保留圆角 该项目将按照我们的预期进行剪辑 Fir
  • 请使用同一按钮播放和暂停音频

    我有这段代码并且只是播放 但我想使用相同的按钮 图像 播放和暂停 并且我不知道我需要添加什么 我需要做什么 请帮帮我
  • 如何使用jQuery加载跨域html

    我有 2 个不同的 java web 项目在 2 个不同的 tomcat 服务器上运行 假设 projA 和 projB 在这里 我尝试从 projA 加载 projB 中可用的 html 我只是使用 jQuery load 来实现这一点
  • HTML 电子邮件中的边距有什么替代方案?

    Hotmail 不支持 HTML 电子邮件中的边距 还有其他选择吗 我建议使用表格并调整列的宽度 HTML 电子邮件有时搭配表格效果更好 此外 您还可以查看收件箱中的一封电子邮件 该电子邮件可以执行您想要的操作并检查源代码 由于这个答案似乎
  • 我们可以为 border-bottom 属性设置渐变颜色吗? [复制]

    这个问题在这里已经有答案了 我们可以添加渐变颜色吗border bottomhtml块元素的属性 边框应该与此类似 谁能告诉我这在 CSS3 中是可能的吗 我像这样尝试过 但无法让它工作 border gradient border bot
  • CSS水平导航间距

    我正在尝试用 css 创建一个水平导航栏 其中包含 5 个均匀间隔的链接 html 希望保持这样 div ul li a href one html One a li li a href two html Two a li li a hre
  • onclick链接/按钮获取数据属性值

    span class btn btn block btn inverse btn icon glyphicons home i i Daily span span class btn btn block btn inverse btn ic
  • css中的减号或下划线有什么作用吗?

    这个问题和我问的很相似here https stackoverflow com questions 6110816 period in css does it do anything 我正在清理一些文件 我在这个 css 中遇到了这个 so
  • Twitter Bootstrap:按钮下拉列表中的图标

    Here http jsfiddle net DjHyQ 是 jsfiddle 上的链接 其中包含一些演示 它在 Chrome 甚至 IE 中运行良好 但在 FF 中图标会下降 我怎样才能解决这个问题而不用负边距或类似的东西来提升它们 我不
  • Bootstrap 多选限制问题

    我使用创建了一个多选下拉列表引导多选 http davidstutz github io bootstrap multiselect 我需要在选项选择中设置一个限制 这里我将其设置为 5 如果达到限制 我只需禁用其他选择选项 它就可以完美工
  • ag-Grid 中的行格式

    我们需要有条件地将行文本设置为粗体 目前它仅适用于单个单元格 但我们需要在所有列单元格上应用文本粗体 应用格式设置后 isBold 列必须隐藏 删除 此列仅用于格式化 如何应用文本缩进 10px isBold 列包含真实值的第一列的 有可能
  • Chrome 开发工具准确计算 CSS 规则值

    无论如何 例如我可以获取要在 Chrome 开发工具中显示的字体的确切像素值 带小数位 吗 In Firebug 如下 当我定义 value 它显示精确的计算值 以像素为单位 最多 4 位小数 In Chrome 开发工具 如下 它仅显示整
  • 如何在JavaFX中获得狭窄的进度条?

    正如标题所说 我需要制作一个细进度条 我用过这个 progressBar setMaxHeight 0 1 progressBar setPrefHeight 0 1 但这行不通 有人有想法吗 你必须搞乱样式才能让它变小 我真的建议看看ca
  • 将 html

    我有一些服务器端代码当前支持 http 字节范围请求 没有任何问题 但是 我希望能够在将转码后的块发送到客户端之前使用 ffmpeg 即时转码视频文件 位于磁盘上 但 ffmpeg 要求我在获取字节时给它一个寻道时间范围来自客户 给定客户端
  • 使用 HTML 标签作为背景图像而不是 CSS background-image 属性?

    我需要使用 html img 标签作为背景图像 div 然后我将放置一个 p 的内容 我已经尝试过 但似乎无法让它们正确显示 我使用了相对位置 负值的边距 任何建议或指出我正确的方向将不胜感激 p div img src http www
  • 如何防止外部 CSS 添加和覆盖 ReactJS 组件样式

    我有一个自定义的 ReactJS 组件 我想以某种方式设置样式 并将其作为插件提供给许多不同的网站 但是 当网站使用全局样式 Twitter bootstrap 或其他 css 框架 时 它会添加并覆盖我的组件的样式 例如 全局 css l

随机推荐

  • 迭代最近点实现

    我目前正在使用以下伪代码在 C 中实现 ICP 算法 从 获取ICP 简报 http www math tau ac il dcor Graphics adv slides ICP ppt function ICP Scene Model
  • 简单的 Material UI 对话框示例有不需要的滚动条

    我有一个包含网格的简单 Material UI 对话框 它有一个滚动条 即使屏幕足够大以包含整个内容 也可以滚动几个像素
  • GDB 调试器问题 - 没有命名的源文件

    由于某种原因 我在调试时无法让 gdb 识别项目中的文件 我尝试了各种方法 包括下载不同的版本等 最后我做的就是用 Twilight Dragon Media 的 Bundle Package 完全覆盖所有 MingW 有谁知道如何解决这个
  • 从椭圆生成数组

    我有一个方程 它以一般形式 x 2 a 2 y 2 b 2 1 创建一个椭圆 我希望生成一个数组 其中椭圆内部的所有点都设置为 1 椭圆外部的所有点都设置为 1是零 然后这个数组将与另一个数组进行卷积 到目前为止 我已尝试创建一个大小为空的
  • 存储同步:多次删除,部分失败

    我有一个商店 用户可以使用一个删除多个记录destroy手术 现在 其中一些记录被锁定在数据库中 因为其他人正在处理它们 因此无法删除 服务器如何告诉前端Id为a b c的记录删除成功 但Id为x y z的记录无法删除 应移回存储并显示在网
  • 通过 R 中的方向矩阵进行回溯

    我有一个这样的矩阵 https i stack imgur com mzeRI png https i stack imgur com mzeRI png 你可以像这样加载它 matrix structure c C G C A 0 V V
  • 如何使用R在csv文件中按列添加数据?

    我有向量中包含的信息 例如 sequence1 lt seq 1 20 sequence2 lt seq 21 40 我想将该数据附加到文件中 所以我使用 write table sequence1 file test csv sep ap
  • 如何从“埃尔米特”曲线转换为贝塞尔曲线?

    正如主题所述 如何从 Hermite 曲线转换为 Bezier 曲线 具体来说 我正在寻找一种方法来转换 Microsoft XNA Framework 的 Curve 类 使用 Hermite 插值 以便使用 Windows Presen
  • Polymer 1.0:在纸张菜单元素内使用模板 dom-repeat 在选择时显示铁页

    我使用 Polymer 1 0 创建了纸抽屉面板布局 在抽屉里 我有一个菜单 使用纸质菜单 其中的纸质项目装订在铁页上 我把这个例子取自带有核心页面的内容切换 Polycasts 09 https youtu be 6x2A9UgLqEw
  • django Manytomany自关系按中间表id排序

    Model class Person models Model friends models ManyToManyField self blank True null True friends person friends order by
  • Android TableLayout 标题行

    好的 我已经有了这个 TableLayout 它充满了数据 所有行都是以编程方式添加的 我在 Horizo ntalScrollView 内部有 TableLayout 而后者又在 ScrollView 内部 这使我可以水平和垂直滚动 我现
  • Awesomium Winforms 无法在 VMWare 中运行

    我们有一个应用程序在物理机上运行 Awesomium 1 7 5 1 效果很好 但在虚拟机上会失败 在附加了远程调试器的虚拟机上运行的 陷阱 似乎以某种方式使 Awesomium 正常工作 使用 Awesomium 时 您需要在虚拟机中设置
  • 跨多行标记时如何避免空格

    朋友们 我在用着atom编写html代码 每次我输入 p 这个词 它都会自动生成3行代码 p p 现在我给出一个内联类 将两个 p 元素放在一行中 inline display inline block p class inline Hi
  • Django 应用程序部署到 Heroku,应用程序错误,

    我正在努力将 Django 1 10 应用程序部署到 Heroku 正如前言 我正在使用 Pycharm 并且一度不得不重命名我的项目 但它在所有地方都进行了重构并更改了名称 所以我希望这与该问题无关 当我将此网站推送到 Heroku 时
  • bootstrap typeahead - 更改源

    我正在寻找改变的方法source用于提前输入 例如 假设我有以下 2 个列表 并且根据具体情况 我希望使用不同的源进行预输入 var list1 this is first list list2 second list comes here
  • 使用 AJAX 绑定时,创建/更新后具有 IEnumerable 属性的 Kendo 网格模型无法正确更新

    我遇到的问题是 将模型的属性发送到我的控制器以从 Kendo 网格进行更新或创建调用时 模型的属性未正确更新 该模型如下所示 public class ReleaseNotesModel public int NoteID get set
  • 尝试访问 Delphi 7 中的 Excel 表时的提供程序选择

    我正在尝试使用 TAdoConnection 组件从 Delphi 7 连接到 Excel 表 问题是当我选择 Microsoft Jet OLEDB 4 0 Extended Properties Excel 8 0 时 我有时会收到错误
  • 当表单有滚动条时,控件位置是否相对于表单的可见区域?

    我有一个 VB NET 窗体 可以动态创建一组控件 如果窗体上的控件太多而无法查看 窗体将显示滚动条 这是一个自动滚动表单 用户可以向下滚动并单击按钮 这会导致表单发生巨大变化 它会销毁所有控件并根据用户输入绘制新控件 我注意到 如果用户滚
  • Hibernate 标准/对象属性查询

    我有课AppUser class AppUser private String firstName private String lastName getters and setters 我还有另一堂课Student class Stude
  • 表格行分成两页(打印媒体)

    I have a table which is OK in web pages but when printing my table ctrl p it breaks not the way I want The last row of t