i want to build up a printable html page. This page needs on each page a header and footer (at top and bottom on each page). The Page itself contains a table with table-row-group and a table-header, (and a lot more data).
my problem is, that the table will not float around the fixed-div on this page. The div overlays the table.
So i search for a solution to let the table floating "around" the 2 div's on each page and group the row elements.
this is one of my current try to solve it, but it dosn't work.
The target of this "project" is to print it out on a printer.
i qould accept all other posible soulutions so long it's native html, JS and/or css, but NO jquery or other stuff like that. The Solution must only works on firefox 20 (no other browsers)
oh .. and the "DOCTYPE" must be the version i use
THX so much + Greetings 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:roo@foo.bar">roo@foo.bar</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:roo@foo.bar">roo@foo.bar</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>