table printing

[Permudious]

Hi all,

I was wondering if I can print a table inside HTML, I am able to do a print preview but I can't find where I can add some style.

Below my code;

I also made a codepen project, which will be easier to view.

You must be registered for see links

<div class="left">
  <div class="divFilterSecond">&#128438; <a onclick="printDiv()">Print list</a></div>
</div>
<div class="right">
  <table id="table">
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
  <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:table"></iframe>
</div>

.left {
  float: left;
  width: 10%;
  padding: 10px;
  height: 300px;
}   
.right {
  float: right;
  width: 80%;
  padding: 10px 50px 0px 0px;
  height: 300px;
}

.divFilterSecond {
  background-color: #e9edf0;
  border: none;
  color: black;
  padding: 10px 10px;
  text-decoration: none;
  vertical-align: bottom;
  font-size: 14px;
  width:100%;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

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

@media print {
   .inlist {
      color: #000;
      background: #fff;
   }
}

function printDiv() {
        window.frames["print_frame"].document.body.innerHTML = document.getElementById("table").innerHTML;
        window.frames["print_frame"].window.focus();
        window.frames["print_frame"].window.print();
}

 

[JayC]

Where you import your css file you can add media="print" onto the meta tag.

Post automatically merged: Oct 17, 2023

Also, utilizing an iFrame for printing the table might not be the best solution. You could use the CSS "not" query to set everything else to not be printable, based on a class .printable. You would need to check browser support to see if this fits your needs (supports everything except IE and Opera Mini).

 

[Permudious]

Where you import your css file you can add media="print" onto the meta tag.

Post automatically merged: Oct 17, 2023

Also, utilizing an iFrame for printing the table might not be the best solution. You could use the CSS "not" query to set everything else to not be printable, based on a class .printable. You would need to check browser support to see if this fits your needs (supports everything except IE and Opera Mini).

And what if the style is inside the html? Or like the CodePen view?

 

[JayC]

Well, your iFrame doesn't know about other HTML Elements outside of it, and the same with inline CSS. It doesn't see it.

 

[Permudious]

Well, your iFrame doesn't know about other HTML Elements outside of it, and the same with inline CSS. It doesn't see it.

So if I understand you correctly I have to add this inside my site.css and than it should work?

@media print {
body {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}

table {
background-color: blue;
}

td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}