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.
This is my code:
HTML:
<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" />
JavaScript:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
CSS:
.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;
}
How can I fix this? Thanks