HTML browser print no respect css style

Question

I have a table where I fixed the columns and the font to the text. The table is optimized by bootstrap.

I try to print the table through the print menu of the browser and it does not respect the style from css the table that is generated on the sheet

Code for js:

function myFunction() {
            
            
            var css = '@page { size: landscape;} }',
                head = document.head || document.getElementsByTagName('head')[0],
                style = document.createElement('style');

            style.type = 'text/css';
            style.media = 'print';

            if (style.styleSheet){
              style.styleSheet.cssText = css;
            } else {
              style.appendChild(document.createTextNode(css));
            }

            head.appendChild(style);

            window.print();
        }
        
        
    myFunction();

Code css:

 @media print;
    .table th:nth-child(1),
    .table td:nth-child(1) {
      width: 5px;
    }
    
    .table th:nth-child(2),
    .table td:nth-child(2) {
      width: 5px;
    }
    .table th:nth-child(3),
    .table td:nth-child(3) {
      width: 5px;
    }
    
    .table th:nth-child(4),
    .table td:nth-child(4) {
      width: 5px;
    }
    
    .table th:nth-child(5),
    .table td:nth-child(5) {
      width: 5px;
    }
    .table th:nth-child(6),
    .table td:nth-child(6) {
      width: 5px;
    }
    .table th:nth-child(7),
    .table td:nth-child(7) {
      width: 5px;
    }
    .table th:nth-child(8),
    .table td:nth-child(8) {
      width: 5px;
    }
    .table th:nth-child(9),
    .table td:nth-child(9) {
      width: 5px;
    }
    .table th:nth-child(10),
    .table td:nth-child(10) {
      width: 5px;
    }
    .table th:nth-child(11),
    .table td:nth-child(11) {
      width: 5px;
    }
    
    
    .table th:nth-child(12),
    .table td:nth-child(12) {
      font-size: 20px;
      width: 120px;
    }
    
    .table th:nth-child(13),
    .table td:nth-child(13) {
      font-size: 10px;
      width: 5px;
    }
   
    .table th:nth-child(14),
    .table td:nth-child(14) {
      font-size: 10px;
      width: 5px;
    }
    
    .table th:nth-child(15),
    .table td:nth-child(15) {
      font-size: 10px;
      width: 5px;
    }
    .table th:nth-child(16),
    .table td:nth-child(16) {
      font-size: 10px;
      width: 5px;
    }

I would like to respect the css style as in the html page and to generate the same thing on the sheet, thank you!

question from:https://stackoverflow.com/questions/65856967/html-browser-print-no-respect-css-style

Answer 1

The browser (by default) never prints the background color. You would need to enable that option in your browser.

If you are using a print-specific stylesheet, make sure it includes media="screen, print":

<link rel="stylesheet" type="text/css" href="print.css" media="screen, print" />

Also, remember to enable the printing settings in your browser:

-webkit-print-color-adjust: exact;