Member Avatar for OsaMasw

Hello guys, I have a webpage to print that showing some data, I managed to hide all elements that's are not needed in printing, but background color for cells in table not display in printed version, although I've tried to put

<style type="text/css" media="print">
.no-print
{ display: none; }
.bgcol{
background-color: #999;
}
</style>

and tried with css

@media print{
.bgcol{
background-color:#999;
}
}

but still printed without color
4d39ef483389b3011bab1ae498b4e958

it must shows like this

32190ed6567c6d61512dc1a683840352

  • 2 Contributors
  • 5 Replies
  • 28K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by OsaMasw
Member Avatar for JorgeM

I put together an example that you can look at. Seems like the @media print { } is working.

<!DOCTYPE html>
<html>
<head>
<style>
@media print{
  #tbl1 {background-color:#999;
}
</style>

</head>
<body>

<table id="tbl1">
<tr><th>Heading1</th><th>Heading2</th></tr>
<tr><td>Cell1</td><td>Cell2</td></tr>
<tr><td>Cell3</td><td>Cell4</td></tr>
</table>
</body>
</html>

Keep in mind that if the user has to enable "print background colors and images" enabled in their print settings. Your CSS settings will not override that.

4717eff444dad75877972d7f4c3a5ab2

commented: thank you so much !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! +0
Member Avatar for OsaMasw

its not working for me :(
here is the setting in my browser
89a723b9c9befaa077327ed9fa59b4ac

my css for print

    <style type="text/css">
        @media print{
        .no-print{
            display: none;
                }
        .bgcol{
            background-color: #999;
                }
        body{
            padding-top: 1px;
                }
        }
    </style>

my html

<table width="99%" border="1" cellspacing="0" cellpadding="0">
<tr class="brd">
<td><div class="bgcol" align="center"><strong>NO.</strong></div></td>
<td><div class="bgcol" align="center"><strong>RTU NAME </strong></div></td>
<td><div class="bgcol" align="center"><strong>RTU STATUS </strong></div></td>
</tr>
</table>

still no background color,
FYI am using Bootstrap CSS maybe this affect my css ?

Member Avatar for JorgeM

I'll check your code soon but did you take my example code and try it on a self standing page (not including boot strap or your code)? Did it work for you?

Member Avatar for OsaMasw

oooh , sorry I forget to tell you :), your code works perfectly
my code works as well .
so that why I suspect its because of Bootstrap .

Edited by OsaMasw
Member Avatar for OsaMasw

Solved my problem
after watching bootstrap.css
I saw @media print
and and added few lines to my print code
so it became like this

<style type="text/css">
@media print{
    .no-print{
        display: none;
    }
    .bgcol{
        background-color: #999;
    }
    body{
        padding-top: 1px;
        background: transparent;
    }
}
</style>

and the result was as I want
03e4604527de201bc9b67b5b75a801f0

this was my nightmare background: transparent;

thanks for helping

Edited by OsaMasw
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.