javascript - 在表格行上隐藏类会导致 colspan 在打印窗口中不起作用

Question

这是问题的一个 fiddle :https://jsfiddle.net/m5et9fwL/

基本上问题是当在 tr 或 td 上有一个隐藏类时，它应该在普通页面上隐藏但在打印时可见，colspan 决定停止工作，如 fiddle 所示。我试过将 colspan 直接添加到 CSS，但不幸的是，这也没有解决问题。

有谁知道这可能是什么原因，我将如何解决这个问题？

标记:

<table>
    <tr>
        <td>Title</td>
        <td>1123124i12049120491</td>
        <td>1123124i12049120491</td>
        <td>1123124i12049120491</td>
    </tr>
    <tr>
        <td class="hidden" colspan="4">1130192301312312314124819248912849128491289481294812948192849128498129481294892849184294814</td>
    </tr>
</table>
<button class="print">print page</button>

打印激活:

$('.print').on('click', function() {
    window.print(); 
});

CSS:

.hidden {
    display: none;
}

@media print {

    .hidden {
      display: block;  
    }
}

Answer 1

td 必须有一个table-cell 显示，而不是一个 block 。在这里工作:https://jsfiddle.net/m5et9fwL/1/

.hidden {
    display: none;
}

@media print {

    .hidden {
      display: table-cell;  
    }
}

或者，如果 .hidden 类位于 tr 上，则显示属性必须是 table-row。