首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >打印表格时,chrome和safari会将一行切成两半。

打印表格时,chrome和safari会将一行切成两半。
EN

Stack Overflow用户
提问于 2013-03-10 10:17:56
回答 2查看 6.9K关注 0票数 8

我对IE9、火狐和Opera没有这个问题。只有Chrome和Safari。

在打印页面时,如果有一个表格需要在某一时刻被拆分才能在下一页继续,Safari和Chrome会将该行切成两半,并将上半部分打印在第一页,将下半部分打印在第二页上。

这是我尝试使用的代码,它确实解决了我在IE9中遇到的一个问题-在下一页的每一行中打印一个50px x 50px的小图像,文本在第一页上。

代码语言:javascript
复制
table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }

我有7页不同数量的行,平均约10-15行。我能做些什么来解决这个问题?

我使用PHP foreach从数组创建表,所以我不想编辑代码,这样就可以在页面之间保持一致。

EN

回答 2

Stack Overflow用户

发布于 2014-09-10 12:25:40

下面是一个只允许在行之间换页符的表的示例。它应该可以在任何流行的桌面浏览器中工作,包括基于webkit的浏览器……

代码语言:javascript
复制
<style>
  table {
    border-spacing: 0;
    line-height: 1.25em;
  }
  table > tbody > tr > td {padding: 0;}
  table > tbody > tr:first-child > td > div {border-top: 2px solid black;}
  table > tbody > tr > td:first-child > div {border-left: 2px solid black;}
  table > tbody > tr > td > div {
    page-break-inside: avoid;
    display: inline-block;
    vertical-align: top;
    height: 3.75em;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
  }
</style>

<table>
  <tr>
    <td><div>Content</div></td>
    <td><div>Multi-<br/>line<br/>content</div></td>
  </tr>
  <tr>
    <td><div>Content</div></td>
    <td><div>Multi-<br/>line<br/>content</div></td>
  </tr>
</table>

不幸的是,它需要在单元格内容上设置固定的高度,这可能会使它对大多数读过这篇文章的人来说毫无用处。

可以在不设置固定内容高度的情况下实现这一点,但它出人意料地复杂。请查看我在this post中的答案,看看它是如何完成的。

票数 2
EN

Stack Overflow用户

发布于 2013-10-18 18:43:33

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15318183

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档