Я хочу создать страницу для печати на html. Эта страница нуждается в каждой странице в верхнем и нижнем колонтитуле (сверху и снизу на каждой странице). Сама страница содержит таблицу с таблицей-группой строк и заголовком таблицы (и намного больше данных).print html с фиксированным заголовком div и нижним колонтитулом с группой строк-строк
моя проблема в том, что таблица не будет плавать вокруг фиксированного-div на этой странице. Div накладывает таблицу.
Итак, я ищу решение, позволяющее таблице плавать «вокруг» 2 div на каждой странице и группировать элементы строки.
Это одна из моих попыток решить ее, но она не работает.
Целью этого «проекта» является печать на принтере.
Я бы принял все остальные возможные души так долго, что это родной html, JS и/или css, но NO jquery или другие подобные вещи. Решение должно работает только на Firefox 20 (никакие другие браузеры)
ох .. и "DOCTYPE" должен быть версии я использую
THX так много + Привет Сюнь
<!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>