表标题未与表正文

Question

我的表格标题与我的表格主体没有正确对齐。

样本：

https://jsfiddle.net/DTcHh/18178/

我正在使用以下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上使用了table-row来修复标题。

然而，现在这个修复并没有正确地将桌头与身体对齐。我需要表tr上的显示表进行打印。

无论如何，我可以正确对齐这些以确保打印时行不重叠。

任何???

或者有没有办法让页面中断在没有display：table的情况下工作？