Html 避免在表的行内分页符

当我通过wkhtmltopdf将html转换为PDF时，我希望避免在html表格的行内出现分页符。我在内部使用分页符：避免使用表-它的工作方式，但我有这么多行， 那就不行了。 如果将tr的显示设置为块或其他内容，则会更改表的格式并插入双边框。

---

或者可以在拆分表格的每个页面上插入表格标题。

您可以尝试使用CSS：

<table class="print-friendly">
 <!-- The rest of your table here -->
</table>

<style>
    table.print-friendly tr td, table.print-friendly tr th {
        page-break-inside: avoid;
    }
</style>

table.print-friendly tr td，table.print-friendly tr th{
内部分页符：避免；
}

---

大多数CSS规则不直接应用于

标记，因为正是您在上面指出的-它们有一个独特的

显示

样式，不允许使用这些CSS规则。但是，它们中的

和

标记通常不允许这种规范-并且您可以轻松地将这些规则应用到所有使用CSS的子类和

，如上所示。

在内部使用CSS分页符是行不通的（这是webkit浏览器的问题）

---

有一种wkhtmltopdf JavaScript表格拆分技术，它根据指定的页面大小（而不是静态值为x行后的分页）自动将长表格拆分为较小的表格：

我发现在webkit浏览器中解决此问题的最佳方法是在每个td元素中放置一个div，并在其中应用分页符：避免样式，如下所示：

...
<td>
  <div class="avoid">
    Cell content.
  </div>
</td>
...
<style type="text/css">
  .avoid {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }
</style>

。。。
细胞含量。
...
.避免{
内部分页符：避免！重要；
边距：4px 0 4px 0；/*以防止分页符与div中的文本过于接近*/
}

---

尽管Chrome可能无法识别“内部分页符：避免；”属性，这似乎可以防止在使用wktohtml生成PDF时，行内容被分页符一分为二。tr元素可能会稍微挂在分页符上，但div和其中的任何内容都不会挂起。

我根据Aaron Hill的回答编写了以下JavaScript：

//Add a div to each table cell so these don't break across pages when printed
//See http://stackoverflow.com/a/17982110/201648
$(document).ready(function () {
    var ctlTd = $('.dontSplit td');
    if (ctlTd.length > 0)
    {
        //console.log('Found ctlTd');
        ctlTd.wrapInner('<div class="avoidBreak" />');
    }
});

---

这似乎在最新版本的Chrome中运行得很好。

我发现唯一可行的方法是将每个TR元素放在它自己的TBODY元素中，并通过css将分页符规则应用到TBODY元素上。

我使用了上面@AaronHill（）的4px技巧，效果非常好！ 我使用了一个更简单的css规则，无需向表中的每个

添加类

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }
}

试一试

white-space: nowrap; 

---

我找到了一种新方法来解决这个问题，至少对我来说是这样（MacOS Sierra上的Chrome版本63.0.3239.84（官方版本）（64位）

将CSS规则添加到父表：

table{
    border-collapse:collapse;
}

运输署：

tr td{
    page-break-inside: avoid;
    white-space: nowrap;
}

我在Stack Overflow上找到了这个解决方案，但它没有出现在最初的Google搜索中：

---

感谢@Ibrennan208解决了这个问题

我发现，如果表的任何父元素是

display:inline block

或

flex

，则

内部分页符：avoid

将不起作用。确保所有父元素都是

display:block

还考虑重写<代码> > TR ，<代码> TD <代码>显示> <代码>样式，如果打印表中存在问题，则打印格式为CSS <代码>网格> /代码> . < /P> 2020解决方案

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }
}

在所有浏览器上，我唯一能始终如一地工作的就是将每一行放在它自己的表元素中。这也适用于节点HTML-PDF。然后将所有内容设置为

内部分页符：避免

table,
tr,
td,
div {
    page-break-inside: avoid;
}

唯一的缺点是必须手动设置列的宽度，否则看起来会很奇怪。下面的两个专栏对我很有用

td:first-child { width: 30% }
td:last-child { width: 70% }



例子

名字
约翰
姓
风笛手
网站
desiringgod.org
这是一个老问题，但我最近也犯了同样的错误。本例中的问题与引导的
表响应类有关，该类被意外地用于
元素

因此，如果您有相同的问题，请在调用wkhtmltopdf时尝试从
类中删除
表响应
。
对不起，在内部使用
分页符时有什么问题：避免？@ChristianVarga当我在内部使用分页符时：避免使用tr，这不起作用-使用表进行分页符很麻烦。看看这个JavaScript解决方案实际上我已经尝试了
内部分页符：避免使用所有表元素，如tr td，但它不起作用。是的，Google for WebGL，blinding fast JavaScript，portable native client，但我们仍然无法打印数据表。谁需要这样做？？？世界上几乎所有的企业都是这样。顺便说一句，我刚刚试着在谷歌文档中打印电子表格，结果它总是使我的chrome崩溃。我认为谷歌文档是通过pdf打印的/不幸的是，这在基于webkit的浏览器上还不起作用。更多信息，请参见@Peter在这个问题中的答案。它只适用于整张表，而不仅仅是tr/td：我在IE8中遇到过这个问题，可能还有其他问题，它会导致整张表尝试放在一个页面上，并切断任何溢出。它似乎也忽略了这些表格的“按比例调整”选项。@AttilaFulop仍然？你的帖子已经三年了，我还是没法用。ThanksI正在使用wkhtmltopdf将大型表格呈现为PDF格式，这是唯一产生可接受结果的解决方案。这可能更好（Webkit在分页符后不会重复单元格边框），但至少内容在那里。谢谢这比我在Arch Linux上的Chromium版本40.0.2214.111（64位）上的其他版本工作得更好。它很难看，而且感觉很粗糙-但是显然在
表中有多个
tbody
元素是有效的
这对我不起作用（Chrome 56）
<table>
  <tr>
    <td>Forename</td>
    <td>John</td>
  </tr>
</table>
<table>
  <tr>
    <td>Surname</td>
    <td>Piper</td>
  </tr>
</table>
<table>
  <tr>
    <td>Website</td>
    <td>desiringgod.org</td>
  </tr>
</table>