Printing a page causes table to become misaligned

Question

I have a web application that my company uses to log hours, and it behaves strangely when printing a table.

One page displays a table of totals for a certain time period, and it looks fine.

Here's a screenshot of the table:

It looks fine when just viewing it in the browser.

The problem appears when window.print() is called. Then the table shows like this:

Sorry for the smaller screenshot, I couldn't capture it the same way I did the first one.

So there's the problem, and I'm not sure how to fix it.

I'll provide more details as necessary.

Could anybody help shed some light on the issue?

jsFiddle

Answer 1

Maybe you want to see something like THIS

Problem was in your CSS file and this is the way that you should have it:

.report td:not(:first-child) {
        text-align:left // it was set to right
    }