Печатная таблица стилей, похоже, не работает

Question

Лист печати, который я закодировал, кажется, не работает. Я тестировал его во всех браузерах, которые я использовал, и он не работает должным образом. Предполагается, что код будет иметь вид печати только отображаемых таблиц. Навигационная панель, верхний колонтитул, нижний колонтитул, кнопки и все остальное не должны быть видимыми.

Вот печать таблицы стилей я сделал:

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

} 

Но когда я печатаю страницу она по-прежнему отображает нежелательные элементы, как показано здесь, в картинах: 1st image

Хотя это только предположить, печатать таблицы в этой части страницы: 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; 
    } 

} 

Затем добавьте class = 'noprint' (или добавьте класс no-print в существующий оператор класса) в свой HTML, который вы не хотите отображать в печатной версии, такой как ваша кнопка. Я получил это, чтобы работать с «noPrint» вместо «noprint» (нижний регистр).