html - 尽管有 CSS 阻止它发生，但仍发生分页符

Question

在我尝试导出为 PDF 的文档中，有一个注释表。该表由几行组成，第一行显示作者，第二行显示评论。评论行由一个单元格组成，该单元格是预包装器以保留空白，并且包含用于每行文本的

元素或用于空格的
元素。

每当评论行超出页面底部时，页面就会中断并将整行推到下一页，尽管我的 css 如下所示

table {
    page-break-inside: auto;

    tbody {
        page-break-inside: auto;

        .comment-author {
            page-break-after: avoid;
        }

        .comment-content {
            page-break-before: avoid;
            page-break-inside: auto;

            p {
                page-break-inside: auto;
            }

            br {
                page-break-inside: auto;
            }
        }
    }
}

谁能解释一下我做错了什么？

根据要求，HTML 是这样的:

<table>
    <thead/>
    <tbody>
        <tr className="comment-author">
            <td>John Smith</td>
        </tr>
        <tr className="comment-content">
            <td>
                <p>This would be the first line of text</p>
                <br/>
                <p>This would be the second line of text</p>
                // Etc for full comment content until last line
                // Designed to never end with a <br>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

刚刚结束删除表格并改用 div。这意味着额外的 CSS，包括 display: table-cell 以实现一致的设计。