Druckvorlage scheint nicht zu funktionieren

Question

Die Druckvorlage, die ich programmiert hatte, scheint nicht zu funktionieren. Ich habe es in allen Browsern getestet, die ich benutzt habe und es funktioniert nicht wie erwartet. Der Code soll angeblich nur eine Druckansicht der angezeigten Tabellen enthalten. Die Navigationsleiste, Kopfzeile, Fußzeile, Schaltflächen und alle anderen sollten nicht sichtbar sein. Hier

ist die Druckstylesheet i gemacht:

@media print{ 

    header nav, footer{ 
    display:none; 
    } 

    .clearfix, #sidebar, .columns btn-group{ 
    display:none; 
    } 

    @page{ 
    margin: 0.5cm; 
    } 

    body { 
    font: 12pt Georgia, "Times New Roman", Times, serif; 
    line-height: 1.3; 
    } 

} 

Aber wenn ich die Seite zu drucken zeigt noch die unerwünschten Elemente wie hier in den Bildern zu sehen: 1st image

Während es nur annehmen, zu drucken, um die Tabellen in diesem Teil der Seite: tables

Answer 1

@media print{ 

    header nav, footer{ 
    display:none !important; 
    } 

    .clearfix, #sidebar, .columns btn-group{ 
    display:none !important; 
    } 

    @page{ 
    margin: 0.5cm !important; 
    } 

    body { 
    font: 12pt Georgia, "Times New Roman", Times, serif !important; 
    line-height: 1.3 !important; 
    } 

} 

Fügen Sie dann class = 'noprint' (oder fügen Sie die Klasse no-print zu einer vorhandenen Klassenanweisung hinzu) in Ihren HTML-Code, der nicht in der gedruckten Version erscheinen soll, z. B. Ihre Schaltfläche. Ich habe das mit 'noPrint' anstelle von 'noprint' (Kleinbuchstaben) arbeiten lassen.