javascript - 打印问题 : table scrollbars are not hidden

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;
    }
}