CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John Steve
John Steve

Reputation: 49

Printing Issue: table scrollbars are not hidden

I have a scrollable table and it works fine. However, when I print this table, I do not want scrollbars to appear. I included the CSS, an example of the table data filling, and 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>

Some data to produce the issue:

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

The used CSS styles:

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

Upvotes: 0

Views: 533

Answers (1)

orabis
orabis

Reputation: 2809

Check this reference

You simply need to add the following to your css

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

Upvotes: 3

Related Questions