Question

基本上问题是当tr或td上隐藏的类应隐藏在普通页面上但在打印时可见时，colspan决定停止工作，如所示小提琴。我已经尝试将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。

Answer 2

使用

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

在表行上具有隐藏类会导致colspan无法在打印窗口中工作

2 个答案: