Imprimir color de fons en una taula HTML
Reading time: 5 – 8 minutes
Com molts sabreu, sobretot els que ho heu intentat. Si tenim una pàgina web amb una taula que té algún color de fons o imatge al enviar-la a la impresora aquesta no s’imprimeix. Només és possible imprimir la lletra i el contorn de la taula. Doncs bé, alguna vegada es pot tenir la necessitat que això passi. Aquí és on comença el problema i on intento explicar la solució que em van donar l’Oriol i la Sara.
La idea és per exemple, tenir una taula tan simple com aquesta:
Gràcies al següent codi HTML i CSS. Podriem tenir la vista anterior per pantalla i el color de fons blavós que es veu a la captura del final de l’article a l’imprimir:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<title>PROVA</title>
<style media='screen'>
<!--
body{font-family:arial,sans-serif; font-size:12px; text-align:left;}
.marc tr td {border-width:1px; border-style:solid; border-color:#999999;}
.capçalera {background-color:#ABAE8A; font-weight:bolder; text-align:center;}
-->
</style>
<style media='print'>
<!--
body{font-family:arial,sans-serif; font-size:13px; text-align:left;}
.marc tr td {border-width:1px; border-style:solid; border-color:#999999;}
.capçalera {font-weight:bolder; text-align:center; font-size:11px;}
table, td {margin: 0; padding: 0;}
td {margin: 0; padding: 0;}
div { border-bottom: 14px solid ; border-bottom-color:#ADCEF7;}
span {display: block; margin-bottom:-14px; float:left;}
-->
</style>
</head>
<body>
<table>
<tr><td class='capçalera'>
<div><span>TITULO</span></div>
</td></tr>
<tr><td >
alsjfaljfaljflask
</td></tr>
<tr><td >
Salñsjfalñjfdalñskf
</td></tr>
</table>
</body>
</html>
Descarregar el codi.
La taula imprimida quedaria així:
Com podeu veure el que fa el codi CSS és jugar amb les cantonades de la taula que si que s’imprimeixen, llavors els dona el suficient gruix com perquè pintin tota la capçalera i finalment col·locant el text al damunt de les cantonades perquè doni la sensació que esta al seu lloc. Un gran eginy realment, llàstima que no hi hagi res més elegant per fer-ho.
