我想建立一个可打印的HTML页面。该页面需要在每个页面上有一个页眉和页脚(在每页的顶部和底部)。 页面本身包含一个包含表格行组和表格标题(以及更多数据)的表格。打印HTML与固定的div页眉和页脚与表行组
我的问题是,表格不会在此页面上的固定div周围浮动。 div覆盖表格。
因此,我寻找一个解决方案,让表浮动“围绕”每个页面上的2个div并对行元素进行分组。
这是我目前试图解决它的一个,但它没有工作。
该“项目”的目标是在打印机上打印出来。
我应该接受所有其他posible soulutions只要它是原生html,JS和/或css,但没有jQuery或其他类似的东西。 解决方案必须仅适用于火狐20(没有其他的浏览器)
哦..和 “DOCTYPE” 必须是我用
THX这么多+问候 XUN
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
@page{margin:3mm 3mm 3mm 3mm;}
body{color:#000000;background-color:#FFFFFF;overflow:scroll;font-size:12px;font-family:verdana,arial,helvetica,sans-serif,lucida console,fixedsys;padding:0px;margin:0px;border-spacing:0px;}
</style>
<body>
<div style="width:20cm;position:fixed;top:0;font-size:0.8em;float:left;">
<table style="width:100%;">
<tr>
<td style="text-align:left;"><img src="img.png" style="max-width:5cm;max-height:3cm;vertical-align:top;"></td>
<td><a href="test1.html"><b>REFRESH</b></a></td>
<td style="text-align:right;vertical-align:top;">
<table align="right">
<tr><td>Phone:</td><td> </td><td>[+49] 12 34/5 67 89</td></tr>
<tr><td>Fax:</td><td> </td><td>[+49] 12 34/5 67 89</td></tr>
<tr><td>Web:</td><td> </td><td><a href="HTTP://foo.bar">HTTP://foo.bar</a></td></tr>
<tr><td>E-Mail:</td><td> </td><td><a href="mailto:[email protected]">[email protected]</a></td></tr>
</table>
</td>
</tr>
</table>
</div>
<div style="width:20cm;position:fixed;bottom:0;">
<hr style="border:1px solid #000000;">
<table style="width:100%;font-size:0.7em;">
<tr>
<td style="text-align:right;vertical-align:top;"><b>Bank:</b></td>
<td> </td>
<td style="text-align:left;vertical-align:top;">
<table align="left">
<tr><td>User:</td><td> </td><td>abc def</td></tr>
<tr><td>Inst:</td><td> </td><td>xyz-Bank</td></tr>
<tr><td>Kto Nr.:</td><td> </td><td>123456</td></tr>
<tr><td>BLZ:</td><td> </td><td>123456789</td></tr>
<tr><td>IBAN/SEPA:</td><td> </td><td>DE123456789123456789</td></tr>
<tr><td>BIC/SWIFT:</td><td> </td><td>ABC123DEF456</td></tr>
</table>
</td>
<td> </td>
<td style="text-align:right;vertical-align:top;"><b>Kontakt:</b></td>
<td> </td>
<td style="text-align:left;vertical-align:top;">
<table cellpadding="0" align="left">
<tr><td>Post:</td><td> </td><td>foo bar, blub com, too roo</td></tr>
<tr><td>Phone:</td><td> </td><td>[+49] 12 34/5 67 89</td></tr>
<tr><td>Fax:</td><td> </td><td>[+49] 12 34/5 67 89</td></tr>
<tr><td>Web:</td><td> </td><td><a href="HTTP://foo.bar">HTTP://foo.bar</a></td></tr>
<tr><td>E-Mail:</td><td> </td><td><a href="mailto:[email protected]">[email protected]</a></td></tr>
</table>
</td>
</tr>
</table>
</div>
<table style="width:20cm;margin:0px;padding:0px;border-spacing:0px;border:1px solid #000000;">
<tr>
<td>
<table style="width:100%;">
<tr>
<td>
<small><small>
xyzfirma<br>
abc def ghi jkl mno pqr</small></small>
<br>
<big><big><b>Empfänger:</b><br>
jombo rombo<br>
kalinka 123<br>
12345 heidana<br>Deutschland</big></big>
</td>
<td style="text-align:right;vertical-align:top;"><big><b>Datum: 12.34.5678</b></big></td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width:20cm;margin:0px;padding:0px;border-spacing:0px;border:1px solid #000000;display:table-row-group;">
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
<tr><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td><td>123456789</td></tr>
<tr><td>123456789</td><td>abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ aBcDeFgH iJkLmNoPqRsT uVwXyZ</td></tr>
</table>
</body>
</html>