Question

我正在使用WickedPDF将HTML转换为PDF，由于某种原因，即使我认为自己具有正确的HTML代码，我的表似乎仍在进入下一页。请注意，以<td>开头的信息实际上是一个嵌套表，因此我不确定是否与此有关。

这是报告中的样子：

这是我正在使用的CSS代码：

<style>
    p, ul {
        color: #545658;
        font-size: 12pt;
        font-family: "Arial";
        font-weight: 500;
    }

    * {
        font-family: "Arial";
    }
    h1 {
        color: #ED1C24;
        font-weight: normal;
        font-family: "Arial";
    }
    th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: center;
        background-color: black;
        color: white;
    }

    td {
        color: #545658;
        padding-top: 5px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 5px;
    }

    table.bordered {
        border-collapse: collapse;
    }
    table.bordered td {
        border: 1px solid black; 
    }
    table.bordered tr:first-child td {
        border-top: 0;
    }
    table.bordered tr td:first-child {
        border-left: 0;
    }
    table.bordered tr:last-child td {
        border-bottom: 0;
    }
    table.bordered tr td:last-child {
        border-right: 0;
    }

    tr.bordered:nth-child(even) {background-color: #f2f2f2}

    img.finding {
        position:absolute;
        width:60%;
        height: 40px;
        margin-left: -20px;
        max-width: 100%;
        z-index:-1;
    }

    p.finding {
        display: inline;
        color: white;
        font-weight: bold;
        font-size: 16pt;
        line-height: 1.75em;
    }

    code {
        background-color: #eee;
        border: 1px solid #999;
        display: block;
        padding: 5px;
        font-family: "Courier";
        font-size: 9.5pt;
        color: black;
    }

    pre {
        white-space: pre-wrap;       /* Since CSS 2.1 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-break: break-all;  
    }

    table { page-break-inside: auto; width: 100%;}
    thead { display: table-row-group; }
    tr { page-break-inside: auto; }

</style>

我在做什么错，导致我的表要等到下一页才开始，因为表的内容对于上一页的其余部分而言太大了？我以为我的tr { page-break-inside: auto; }行可以解决这个问题。是因为我有一个嵌套表吗？

这仅在嵌套的HTML表上发生。无论内容的长度如何，普通的HTML表都从同一页开始。

这是一个示例HTML表：

<html>
<body >
  <table border=5 bordercolor=red>
    <tr>
      <td>
        Fisrt Column of Outer Table
      </td>
      <td>

        <table border=5 bordercolor=green>
          <tr>
            <td>
              [lots of data right here]
            </td>
          </tr>
          <tr>
            <td>
              [lots of data right here]
            </td>
          </tr>
        </table>
      </td>
  </tr>
  </table>
</body>
</html>

如果HTML表格太大，则它直到下一页才开始

0 个答案: