Problem coloring table rows in print using @media ASP.NET MVC

Question

In my view the result of my table is as follows:

In printing:

I put my css styles used in the view inside @media as follows:

<style>
    .form-control {
        min-width: 100% !important;
    }

    .p-periodo{
        text-align :left !important;
        margin-left: -1.5% !important;
        margin-top: 3% !important;
    }


    #btnImprimir {
        margin-top: 8% !important;
    } 

    th {
        text-align: center !important;
    }

    .debito {
        color: red;
    }

    .saldo {
        background-color: gainsboro;
    }

    .credito {
        text-decoration-color: black;
    }

    .periodoMensal {
        border: none !important;
        border-style: none !important;
        background-color: dimgray;
        color: white;
    }

    @@media print {

        th {
            text-align: center !important;
        }

        #myContainerPrint{
            margin-top: -10% !important;            
        }

        #btnImprimir {
            display: none !important;
        }

        .debito {
            color: red !important;
        }

        .saldo {
            background-color: gainsboro !important;
        }

        .periodoMensal {
            border: none !important;
            border-style: none !important;
            background-color: dimgray;
            color: white;
        }

        .credito {
            text-decoration-color: black !important;
        }

    }

</style>

What I need to do to print the colors of the lines in my table to be the same as in my view ?

Answer 1

@print media {

}

you’re wearing it like this :

@@print media {

}