Html 表头未与表体正确对齐

我的表头与表体未正确对齐

演示：

我正在使用以下CSS：

table tr { /* FOR PRINTING */
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    display: table; /* Here*/
}

table thead tr { /* Override for the above - need to fix */
    display: table-row; /* Here*/
}

我使用tr上的显示表来确保打印时行不会重叠到两页上

然而，在tr上使用这个完全弄乱了桌面。因此，我使用thead tr上的表行来修复标题

但是，现在此修复程序无法正确地将桌面与主体对齐。我需要tr表上的显示表进行打印

我是否可以正确对齐这些行，以确保打印时行不会重叠

有人吗

---

或者有没有一种方法可以让分页符在没有显示的情况下工作：tr上的表？

我正在处理它，但是我可以说您的CSS中确实存在错误：

html，body{padding:0，margin:0；}

。它应该是：

html，body{padding:0；margin:0；}

ah good spot，谢谢。我知道，如果我只是将它们都设置为display:table row，它在屏幕上就可以正常工作，但我需要将display:table保留在tr上，以便打印，因为它会将行拆分到下一页。没有这个，它就不能正确打印。保持它不会正确对齐。让我抓狂的是，希望有一种方法，谢谢你的关注。你是否可以发布一个布局在正常显示和打印显示中应该是什么的草图？如果你只是从表tr css中删除display:table，它将修复布局：这就是打印布局需要的外观。但是我需要保留上面的样式，以防止打印时行重叠到两页上。而且

{page break inside:avoid；}

已经不适合您了？