CSS not loading when I call a div to print

Question

I have a div that I would like to print, but when I call it, the CSS doesn't apply. I got the JS from here. It's supposed to print just the table, which it does, but It doesn't apply the styles for the table, and it ends up unformatted.

Expected result

Actual result

My code

function printDiv(divName) {
  var printContents = document.getElementById(divName).innerHTML;
  var originalContents = document.body.innerHTML;

  document.body.innerHTML = printContents;

  window.print();

  document.body.innerHTML = originalContents;
}

.table-container {
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
  color: black;
  border: 2px solid black;
}

td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

th {
  font-size: 20px;
}

td {
  font-size: 15px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.total1 {
  border: none;
}

.pc-border-title {
  text-align: center;
}

.intro-heading {
  font-size: 25px;
  text-align: center;
  color: #ffffff;
}

.pcbuilder-link {
  color: #cecece;
}

.pcbuilder-link:hover {
  color: #adadad;
}

.table-heading {
  font-size: 50px;
  text-align: center;
  color: #000000;
  margin-bottom: 10px;
  margin-top: 0px;
  border: 2px solid #000000;
}

#printableArea {
  padding: 10px;
  background-color: #ffffff;
  border-radius: 10px;
}

.table-container {
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
  color: black;
  border: 2px solid black;
}

td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

th {
  font-size: 20px;
}

td {
  font-size: 15px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.total1 {
  border: none;
}

.pc-border-title {
  text-align: center;
}

.intro-heading {
  font-size: 25px;
  text-align: center;
  color: #ffffff;
}

.pcbuilder-link {
  color: #cecece;
}

.pcbuilder-link:hover {
  color: #adadad;
}

.table-heading {
  font-size: 50px;
  text-align: center;
  color: #000000;
  margin-bottom: 10px;
  margin-top: 0px;
  border: 2px solid #000000;
}

#printableArea {
  padding: 10px;
  background-color: #ffffff;
  border-radius: 10px;
}

<div id="printableArea">
  <h3 class="table-heading" contenteditable="true">My PC Setup</h3>
  <table spellcheck="false">
    <tr>
      <!--https://pcbuilder.net/rigs/aK6rMH/-->
      <th>Part</th>
      <th>Name</th>
      <th>Price</th>
      <th>Notes</th>
    </tr>
    <tr>
      <td>Processor</td>
      <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">AMD Ryzen 9 7950X
      </td>
      <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
        747</td>
      <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">
        32-Thread<br>16-Core<br>4.5GHz</td>
    </tr>
    <tr>
      <td>Motherboard</td>
      <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">GIGABYTE X670E AORme Master
      </td>
      <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
        542.84</td>
      <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Socket: AM5
        <br>RAM Slots: 4<br>Chipset: AMD X670E</td>
    </tr>
    <tr>
      <td>CPU Cooler</td>
      <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Cooler Master Hyper 212 EVO V2</td>
      <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
        90</td>
      <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Side Panel: Tempered Glass, Steel<br>Cabinet Type: ATX Full Tower</td>
    </tr>
    <tr>
      <tr>
        <td>Case</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">NZXT H510 - CA-H510B-B1
        </td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
          1,584.90</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Memory: 24GB
          <br>Chipset: GeForce RTX 3090 Ti<br>Interface: PCIe 4.0 x16</td>
      </tr>
      <tr>
        <td>Graphics card</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Nvidia RTX 3090 TI Founders Edition</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
          51.44</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Fan Speed: 650RPM-1800RPM
          <br>Noise Level: 8-27dBA</td>
      </tr>
      <tr>
        <td>RAM</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">G.Skill Trident Z5 RGB Series 32GB 2 x 16GB (x2)</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
          564.42</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">RAM Size: 64GB
          <br>RAM Type: DDR5</td>
      </tr>
      <tr>
        <td>Storage (SSD)</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Samsung EVO 970 1TB
        </td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
          167.99</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Capacity: 1 TB
          <br>Type: SSD<br>Cache Memory: 1024 MB</td>
      </tr>
      <tr>
        <td>Storage (HDD)</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Seagate BarraCuda 2TB
        </td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
          53.49</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Capacity: 2 TB
          <br>Type: HDD<br>RPM: 7200 RPM<br>Interface: SATA 6 Gb/s<br>Cache Memory: 256 MB</td>
      </tr>
      <tr>
        <td>Case Cooler</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">ARCTIC P12
        </td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
          5.73</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Fan RPM: 1800 RPM
          <br>Airflow: 56.3 CFM<br>Noise Level: N/A</td>
      </tr>
      <tr>
        <td>Power Supply</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Thermaltake Smart 430W
        </td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
          98.95</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Power: 430W
          <br>Efficiency: 80+</td>
      </tr>
      <tr>
        <td>Monitor</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Acer SB220Q Bi 21.5
        </td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
          170</td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Screen Size: 21.5"
          <br>Response Time: 4ms<br>Resolution: 1920 x 1080<br>Refresh Rate: 75 Hz</td>
      </tr>
      <tr>
        <td class="total1"><b>Total</b></td>
        <td class="total1"></td>
        <td class="total1"></td>
        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
          <b>4,077</b>
        </td>
      </tr>
  </table>
</div>
<br>
<input type="button" onclick="printDiv('printableArea')" value="Print your setup" />

How can I fix this? Thanks

Answer 1

I faced similar problem while printing table using similar javascript function. You have to provide all css to the print window as well. I am pasting my code here. You will have to modify that to suit your requirements.

    function PrintElem(elem)
    {
        var orgPrint = document.getElementById(elem).innerHTML;
        document.querySelectorAll(".no-print").forEach(el => el.remove()); // removes some elements from the table that are not to be pronted
        var toPrint = document.getElementById(elem).innerHTML;
        var mywindow = window.open('', 'PRINT', 'height=400,width=600');

        mywindow.document.write('<html><head><title>My Title</title>');
        mywindow.document.write('<style>');
        mywindow.document.write('* { font-family: Roboto, \'Segoe UI\', Tahoma, sans-serif; }');
        mywindow.document.write('#invTable { border-collapse: collapse; width: 100%; }');
        mywindow.document.write('#invTable td, #invTable th { border: 1px solid #ddd; padding: 8px; }');
        mywindow.document.write('.text-end { text-align: right !important; }');
        mywindow.document.write('.text-center {text-align: center !important; }');
        mywindow.document.write('body {    display: flex;    flex-direction: column;}');
        mywindow.document.write('.print-footer { margin-top: auto; position:fixed; bottom:0;text-align: center; width:100%; border-top: 1px solid #ddd; }');
        mywindow.document.write('</style>');

        mywindow.document.write('</head><body >');
        mywindow.document.write('<br/><br/><br/>');
        mywindow.document.write(toPrint);
        mywindow.document.write('</body></html>');

        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10*/

        mywindow.print();
        mywindow.close();
        
        document.getElementById(elem).innerHTML = orgPrint; // restores the table as is 

        return true;
    }