打印问题：表格滚动条未隐藏

Question

我有一个可滚动的表，它工作正常。但是，当我打印此表时，我不希望出现滚动条。我包括了CSS，表数据填充的一个例子，以及html。

<table class="table-container">
            <tbody>
              <tr>
                 <td>Header 1</td>
                 <td> Header 2</td>
                 <td> Header 3</td>
                 <td> Header 4</td>
              </tr>
              <tr>
                 <td colSpan="2">
                    <div class="scroll-container">
                       <table>
                         <tbody id="tableBody">
                         </tbody>
                       </table>
                    </div>
                 </td>
               </tr>
            </tbody>
</table>

产生问题的一些数据：

for(var index=0; index< 1000; index++){
    var tr= document.getElementById("tableBody").insertRow();
    for(var index2=0; index2< 4; index2++){
        var td= tr.insertCell();
        td.innerHTML= index+ "_"+ index2;
    }
}

使用的CSS样式：

.table-container {
    border-radius: 3px;
    width:50%;
}
.table-container table {
    width: 100%;
}
.scroll-container{
    max-height: 150px;
    overflow-y: scroll;
}

Answer 1

Check this reference

您只需将以下内容添加到您的css

即可

@media print {
    .scroll-container {
        max-height: 100%;
        overflow-y: auto;
    }
}