相关疑难解决方法(0)

当我通过wkhtmltopdf将html转换为PDF时,我想避免在html中的表行内部分页.我使用page-break-inside:避免使用table-它的工作,但是我有很多行,然后没有工作.如果将tr的显示设置为块或其他内容,则会更改表的格式并插入双边框.或者可以在分割表的每个页面上插入表头.

我page-break-inside:auto, page-break-inside:avoid, page-break-after:auto, margin-top and margin-bottom和其他人玩了很长时间,但仍然无法找到解决方法如何在我的长HTML表中打破行,这是打印的.

页面看起来像打印模式中的左侧屏幕截图(或在Chrome中打印之前的预览窗口):

我需要实现的是打破每个页面底部的每一行,这将分成两页(其内容也是......)

这是我的页面的一段代码:

...
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
td { padding-left: 15px; padding-right: 15px; }
@media print{
    .netisk{
        visibility: hidden;
    }
}
@page{
    size: 21cm 29.7cm;
    margin: 0px;
}
body {
    margin-left: 1cm;
    margin-right: 1cm;
}
</style>
...
...
...
<?php

    echo "<table cellspacing='0'><thead><tr><th> ID </th><th> Název projektu </th><th> Kategorie </th><th> Autor </th><th> T?ída </th><th> Rok </th><th> Vedoucí práce </th></tr></thead><tbody>";

if (mysql_num_rows($result) > 0) …

我一直遇到表格中的分页问题.以为我有一个解决方案,因为它在这个SO问题中工作得很好:

在React app中的<table>中插入分页符

这对于有一列的表来说很好,但是现在我正在处理多个列,这是一团糟.

基本上我必须包括display: block让分页符正常工作,但这使得它从格式良好的表转到此:

我在MDN的列表中只是尝试了可能有用的任何东西.

https://developer.mozilla.org/en-US/docs/Web/CSS/display

此外,分页符仅在单独使用时才起作用,<tr>这是不合需要的,因为它会生成空白页.通过移动pagebreak到<tr>而不是移动来解决这个问题<td>.

我无法解决这些问题; 关于如何解决这个问题的任何建议？

不确定JSFiddle在打印问题上有多大用处,但这里是编译后的HTML.我永远无法让JSFiddle使用React:

https://jsfiddle.net/5gz62d91/

最好的可能是Github回购:

https://github.com/ishraqiyun77/page-breaks

这是代码分开:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import styles from '../assets/scss/app.scss';

class PageBreakIssues extends Component {

    // Render the data points
    renderDataPoint() {
        let dataPoint = [];
        for (let i = 1; i <= 3; i++) {
            let num = (Math.random() * 100).toFixed(2);
            dataPoint.push(
                <td className='data-point' key={ i }> …

我为一家意大利餐厅写了一份菜单。该菜单由一个无序列表组成，其中每个 li 元素都有一个名为“headline”的类。每个 li 元素都包含一个标题和另一个 ul，其中 li-s 作为菜肴。

它看起来像这样：

<ul>
  <li class="headline">
      <h3>Kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
  </li>
  <li class="headline">
      <h3>Another kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
  </li>
</ul>    

我正在尝试制作菜单的可打印版本，但不知道为什么“page-break-after”或“page-break-before”在CSS中的“.headline”上起作用。

我尝试了不同的显示值，如“块”、“内联块”或“表行”，因为阅读某些论坛建议这样做。我还尝试了不同的位置值（“绝对”，“相对”，“静态”）......

我还尝试用 div 元素包裹“标题”li-s 并在 div 元素上使用分页符：

<ul>
  <div>
  <li class="headline">
      <h3>Kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
  </li>
  </div>
  <div>
  <li class="headline">
      <h3>Another kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul> …

请原谅我的英语。

我正在打印一份 pdf 格式的大型报告，其中包括一些表格（一张接一张的表格）。为此，我首先在 html 中生成报告，然后使用dompdf将其传递给 pdf

这是我一张一张地打印一张桌子的方式：

<div>
  <table>
  -----
  </table>
</div>

<div>
  <table>
  -----
  </table>
</div>

这是分页符时打印表格的方式

问题是当有分页符时，表格行被拆分。我想避免它。

我尝试使用 CSS 打印属性，但它不起作用，在其他情况下，page-break-before: always;将我的报告的每个表格打印在不同的页面上。

<style type="text/css">
table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>

因为只有在必要时，我才能在报告中的所有表格中强制分页。

请帮忙。

我的 html 具有这种结构：

<div>
    <div class="pagebr">content1</div>
    <div class="pagebr">content2</div>
    <div class="pagebr">content3</div>
    <div class="pagebr">content4</div>
    <div class="pagebr">content5</div>
    <div class="pagebr">content6</div>
    <div class="pagebr">content7</div>
</div>

所有内部Div元素都是动态变化的。有时会有一两个div，也可能是全部。它不是固定的。但总共是 7。当我写课时 -

div.pagebr
{
    page-break-after:always;   
}

每个 div 都会移动到下一个新页面，在div元素后创建空白空间。 page-break-before:always;做同样的事情并且page-break-after:auto; 不再工作了。

我应该如何为 Div 元素添加类，以便它们可以适合每个页面而不破坏？或者有其他解决方案吗？

任何帮助表示赞赏。谢谢。

我有一个表，我想在打印时在某些TR之前强制分页，因此我四处搜索，发现将“ page-break-before”应用于表行（tr）似乎很简单：将display设置为，block并page-break-before照常使用。但是，它似乎不起作用（至少在Chrome 59，Windows中不起作用）。例如：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  tr.break-here {
    display: block;
    page-break-before: always;
  }
</style>
</head>
<body>
<table>
  <tr class="break-here"><td colspan="2">&nbsp;
  <tr><td colspan="2">section
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr class="break-here"><td colspan="2">&nbsp;
  <tr><td colspan="2">section
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr class="break-here"><td colspan="2">&nbsp;
  <tr><td colspan="2">section
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr><td>a<td>b
</table>
</body>
</html>

打印时，所有这三个部分都在同一页上，但是应该是三个单独的页面。

有人建议使用伪元素，但我没有用。还有建议确保TR的TD包含块级元素，因此在该示例中，我尝试将空div放入相关单元格中，并且也保持不变。

还有如何应用CSS分页符来打印具有很多行的表？，我尝试过的地方：

• 答案：没有效果：
  • tr.break-here { display:block; page-break-after:always; }
  • tr.break-here { page-break-after:always; }

我在这里做错了什么？我该怎么做呢？我也有些困惑，因为链接问题的答案似乎很受欢迎，评论中没有提到任何问题。不能将表分为三个表，因为我需要所有页面上的列宽（自动适应复杂内容）一致。