CODEWITHSUNDEEP
htmlcssprintinghtml-table
john
john

Reputation: 4158

print preview hides table border

I have a regular table with a 1px border. It looks fine and what not:enter image description here

but as soon as I go into the print preview, my borders become invisible: enter image description here

When I print the page it comes out fine, it's only when I'm trying to save it to PDF that the lines don't show up css:

.print_table {
    width: 900px;
    border: solid 1px;
    border-collapse: collapse;
}
.print_table th{
    border-color: black;
    font-size: 12px;
    border: solid 1px;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}
.print_table td{
    border-color: black;
    font-size: 12px;
    border: solid 1px;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    text-align: center;
}
.print_table tr:nth-child(odd){
    background-color:#E8E8E8;
}
.print_table tr:nth-child(even){
    background-color:#ffffff;
}

EDIT: even tried !important on my borders, nothing. Tried making the border 2px and it works but 2px is way too big

Upvotes: 2

Views: 6723

Answers (1)

eritbh
eritbh

Reputation: 796

Wrap the whole thing in a @media all {} rule. This applies the CSS to every kind of display, in this case, including printing as well as screens.

@media all {
    /* Your code here */
}

More on @media queries: http://www.w3schools.com/css/css_mediatypes.asp

JSFiddle demo: http://jsfiddle.net/gbftsxsu/embedded/result/

Upvotes: 1

Related Questions