CSS resize table contents to printed width

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.

You're wanting something like this: http://fittextjs.com/ ? – Corey Rothwell Oct 22 '13 at 16:46 — Corey Rothwell, Oct 22 '13 at 16:46

score 1 · Answer 1 · answered Oct 22 '13 at 16:05

1

Maybe you can try with

@media print
 {
   table.datatables {font-size:10px} /*Type the value that you want*/
 }

answered Oct 22 '13 at 16:05

DaniP

37,813
8
65
74

That would work if I pick an arbitrarily small font size but I was wondering if there was a way to have it auto size the font, essentially a font-size:auto. I do only need this on the print style sheet so the @media print is what I want to affect. – John Wesley Gordon Oct 22 '13 at 16:20
I really don't know about some auto-size font with css but chek this asnwer http://stackoverflow.com/questions/6112660/how-to-automatically-resize-the-size-of-text-inside-a-div – DaniP Oct 22 '13 at 16:33

score 1 · Accepted Answer · answered Oct 22 '13 at 17:06

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.

score 0 · Answer 3 · edited Oct 27 '17 at 10:26

0

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.

edited Oct 27 '17 at 10:26

Stepan Novikov

1,402
12
22

answered Oct 27 '17 at 09:15

Ghufran Javed

27
5

score 0 · Answer 4 · answered Apr 16 '20 at 12:40

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
}

CSS resize table contents to printed width

4 Answers4