Drucken Problem: Tabelle Bildlaufleisten sind nicht versteckt

Question

Ich habe eine scrollbare Tabelle und es funktioniert gut. Wenn ich diese Tabelle drucke, möchte ich jedoch nicht, dass Bildlaufleisten angezeigt werden. Ich habe das CSS, ein Beispiel für das Füllen von Tabellendaten und HTML eingeschlossen.

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

Die verwendeten CSS-Stile:

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

Einige Daten, die die Ausgabe produzieren

.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

Sie müssen lediglich die folgenden CSS hinzufügen

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