Print the entire content of a scrollable table

I have following page to get printed which has horizontal scrolling. I need to print content within the horizontal scroll bar area.

When this page is printed, I get an output which does not contain all the fields in the horizontal scroll bar area.

Not all the content within the scroll bar is printed.

The method I am using is 开发者_JS百科Print CSS.

@media print {
    .noprint {
        display: none;
        overflow: visible;
    }
}

The print CSS you’ve got there will hide any HTML with a class of noprint.

Could you show us an outline of the HTML of the scrolling area, and the regular CSS applied to it?

Ok, I found the solution. This is what I did:

@media print {
    .noprint { 
        display: none
    }
    .mypages div.compare {
        white-space: normal
    }

    .mypages .compare .estate {
        padding-bottom: 110px
    }
}

Here, div .compare is the container which contains the all the elements that I want to print.

and .estate is the one state I want to print in the list of divs. it is used to set the gap between printed elements. Which means that it print 3 states in a row. Then second 3 in the bottom of first and like wise. To set the gap between these rows, I have used .mypages .compare .estate div.