尽管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。这意味着包括display: table-cell在内的额外CSS用于一致的设计。