CODEWITHSUNDEEP
jquerycssuser-interfaceprinting
KItis
KItis

Reputation: 5646

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.

content to be printed

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

enter image description here

Not all the content within the scroll bar is printed.

The method I am using is Print CSS.

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

Upvotes: 0

Views: 5140

Answers (2)

KItis
KItis

Reputation: 5646

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.

Upvotes: 1

Paul D. Waite
Paul D. Waite

Reputation: 98906

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?

Upvotes: 1

Related Questions