CSS resize table contents to printed width - html

Question

I am looking for a way to resize a tables contents using CSS to make sure the contents all show up when printing but yet still keep the text from wrapping for any individual cell. In this example,
<table class="datatables" id="table1">
<tr>
<td style="white-space:nowrap;">This is a table with a bunch of data that stretches off the page when printed.</td>
<td style="white-space:nowrap;">I want it to print on one line, not wrap but also be sized small enough to fit on a printed page.</td>
<td style="white-space:nowrap;">It currently cuts off most of this last column.</td>
</tr>
</table>
The last td is mostly cut off when printing but all these display as I intended on one line. For example purposes I put the style inline but would be using style sheets. My ideal solution would automatically resize the font to fit still on one line per row without wrapping. Any thoughts would be appreciated.

Answer 1

Controlling the output of printing is a nearly impossible task. You never know the variables of what printer the user is using, what fonts are available, what settings are set, etc.
I've had this issue before, and the most clean solution for the user was to convert the table to a .pdf, which will render nearly identical across machines and printers. While it may not seem so easy to do from a technical standpoint, there is a pretty straightforward solution: datatables.
Using the "table tools" plugin, you can create a .pdf formatted version of any table with just a few lines of code and the addition of a few extra files. Here's a working demo In a nutshell, provided your table is correctly formatted and not insanely large (make sure to use <thead> tags) then you should just be able to upload the required files, apply the demo code with a change in the selector to match your table, reference the swf file that facilitates creation of the .pdf, and it should work smoothly. Most issues I've seen in setup have to do with incorrect reference to the swf path.
Voila, printable, simple code.

Answer 2

Maybe you can try with
#media print
{
table.datatables {font-size:10px} /*Type the value that you want*/
}

Answer 3

You can check a print settings in your Chrome Browser by using "Find the Scale Fields" in "Print Options" and adjust the page size on your requirements.

Answer 4

This is not a full-proof solution, you need to check it which values will works for you.
Use CSS transform scale property.
In my case my table width was more hence I did this using javascript.
Since my width was too much, I scaled it lower and adjusted the margin and after javascriptwindow.print() I bring it back to the original state.
document.getElementById('your table id').style.transform = ("scale(0.8)");
document.getElementById('your table id').style.margin = ("0 0 0 -15%");
You can also do it using same property in CSS.
#table {
transform: scale(0.8); //Adjust this accrding to your need by printing
margin : 0 0 0 -15%; //Adjust this accrding to your need by printing
}