在 table 行上隐藏 class 会导致 colspan 在打印 window 中不起作用

Question

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

基本上问题是当 tr 或 td 上有一个隐藏的 class 应该隐藏在正常页面上但在打印时可见时，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 class 在 tr 上，显示属性必须是 table-row。

Answer 2

使用

@media print {    
.hidden {
  display: table-row;        
}}

在 table 行上隐藏 class 会导致 colspan 在打印 window 中不起作用

Having a hidden class on a table row causes colspan to not work in the print window

html

javascript

css

printing

hidden