css - Highlighting a field in a table and have it print -
does know how yellow highlight field in table , have yellow color print? hightlights on screen, not print yellow:
<td style="background-color: yellow">total:</td>
i found out browsers, design, not print background colors. workaround able find can make ultra-thick border of cell or div:
<td style="border-left: 999px solid yellow">
unfortunately, cell contents won't overlay on thick yellow border. checked everywhere online , closest answer find on stack overflow: best ways around css backgrounds not printing
however, answer untested , unable working on computer. tried toying around , experimenting no luck.
ok, found solution problem, solution rather inelegant. said in above question, have create div tag big color border on it. thing is colored borders can print correctly. then, highlighted color displayed, lay div tag text on top. inelegant, works.
it's best set both text div , highlight div's within third "outer" div easy placement. inner divs should position "absolute" , outer div should have position "relative". sample code below. tested code on both chrome , firefox:
<style type="text/css"> #outer_box { position: relative; border: 2px solid black; width: 500px; height:300px; } #yellow_highlight { position: absolute; width: 0px; height: 30px; border-left: 300px; border-color: yellow; border-style: solid; top: 0; left: 0px } #message_text { position: absolute; top: 0; left: 0px; } </style> <body> <div id="outer_box"> <div id="yellow_highlight"> </div> <div id="message_text">hello, world!</div> </div> </body> 
Comments
Post a Comment