Reply to thread

Message

<blockquote data-quote="Permudious" data-source="post: 479481" data-attributes="member: 55273">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.[URL unfurl=&quot;true&quot;]https://codepen.io/Permudious/pen/oNJrwLj[/URL][CODE=html]&lt;div class=&quot;left&quot;&gt;&nbsp; &lt;div class=&quot;divFilterSecond&quot;&gt;&amp;#128438; &lt;a onclick=&quot;printDiv()&quot;&gt;Print list&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;right&quot;&gt;&nbsp; &lt;table id=&quot;table&quot;&gt;&nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &lt;th&gt;Company&lt;/th&gt;&nbsp; &nbsp; &nbsp; &lt;th&gt;Contact&lt;/th&gt;&nbsp; &nbsp; &nbsp; &lt;th&gt;Country&lt;/th&gt;&nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Alfreds Futterkiste&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Maria Anders&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Germany&lt;/td&gt;&nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Centro comercial Moctezuma&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Francisco Chang&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Mexico&lt;/td&gt;&nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Ernst Handel&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Roland Mendel&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Austria&lt;/td&gt;&nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Island Trading&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Helen Bennett&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;UK&lt;/td&gt;&nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Laughing Bacchus Winecellars&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Yoshi Tannamuri&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Canada&lt;/td&gt;&nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Magazzini Alimentari Riuniti&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Giovanni Rovelli&lt;/td&gt;&nbsp; &nbsp; &nbsp; &lt;td&gt;Italy&lt;/td&gt;&nbsp; &nbsp; &lt;/tr&gt;&nbsp; &lt;/table&gt;&nbsp; &lt;iframe name=&quot;print_frame&quot; width=&quot;0&quot; height=&quot;0&quot; frameborder=&quot;0&quot; src=&quot;about:table&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;[/CODE][CODE=css].left {&nbsp; float: left;&nbsp; width: 10%;&nbsp; padding: 10px;&nbsp; height: 300px;}&nbsp;&nbsp; .right {&nbsp; float: right;&nbsp; width: 80%;&nbsp; padding: 10px 50px 0px 0px;&nbsp; height: 300px;}.divFilterSecond {&nbsp; background-color: #e9edf0;&nbsp; border: none;&nbsp; color: black;&nbsp; padding: 10px 10px;&nbsp; text-decoration: none;&nbsp; vertical-align: bottom;&nbsp; font-size: 14px;&nbsp; width:100%;}table {&nbsp; font-family: arial, sans-serif;&nbsp; border-collapse: collapse;&nbsp; width: 100%;}td, th {&nbsp; border: 1px solid #dddddd;&nbsp; text-align: left;&nbsp; padding: 8px;}tr:nth-child(even) {&nbsp; background-color: #dddddd;}@media print {&nbsp;&nbsp; .inlist {&nbsp; &nbsp; &nbsp; color: #000;&nbsp; &nbsp; &nbsp; background: #fff;&nbsp;&nbsp; }}[/CODE][CODE=javascript]function printDiv() {&nbsp; &nbsp; &nbsp; &nbsp; window.frames[&quot;print_frame&quot;].document.body.innerHTML = document.getElementById(&quot;table&quot;).innerHTML;&nbsp; &nbsp; &nbsp; &nbsp; window.frames[&quot;print_frame&quot;].window.focus();&nbsp; &nbsp; &nbsp; &nbsp; window.frames[&quot;print_frame&quot;].window.print();}[/CODE]</blockquote>

[QUOTE="Permudious, post: 479481, member: 55273"] 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. [URL unfurl="true"]https://codepen.io/Permudious/pen/oNJrwLj[/URL] [CODE=html]<div class="left"> <div class="divFilterSecond">🖶 <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>[/CODE] [CODE=css].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; } }[/CODE] [CODE=javascript]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(); }[/CODE] [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members