การแบ่งหน้า การพิมพ์ สำหรับข้อมูลต่อเนื่อง ด้วย css อย่างง่าย
23 February 2011ในกรณีที่เรามีรูปแบบ ข้อมูลที่ต้องการพิมพ์ มีการแสดงผลข้อมูลแบบต่อเนื่อง
แต่เราต้องการพิมพ์ข้อมูลโดย ให้ บราวเซอร์แบ่งหน้าให้โดยอัตโนมัติ ตามขอบเขต
ของข้อมูลที่เรากำหนด เพื่อให้สะดวกในการพิมพ์ข้อมูลได้ง่าย
ตัวอย่างโค้ดสำหรับทดสอบ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css print report table continue</title>
<style type="text/css">
* {
margin:0;
padding:0;
font-family:Arial, "times New Roman", tahoma;
font-size:12px;
}
html {
font-family:Arial, "times New Roman", tahoma;
font-size:12px;
color:#000000;
}
body {
font-family:Arial, "times New Roman", tahoma;
font-size:12px;
padding:0;
margin:0;
color:#000000;
}
.headTitle {
font-size:12px;
font-weight:bold;
text-transform:uppercase;
}
.headerTitle01 {
border:1px solid #333333;
border-left:2px solid #000;
border-bottom-width:2px;
border-top-width:2px;
font-size:11px;
}
.headerTitle01_r {
border:1px solid #333333;
border-left:2px solid #000;
border-right:2px solid #000;
border-bottom-width:2px;
border-top-width:2px;
font-size:11px;
}
/* สำหรับช่องกรอกข้อมูล */
.box_data1 {
font-family:Arial, "times New Roman", tahoma;
height:18px;
border:0px dotted #333333;
border-bottom-width:1px;
}
/* กำหนดเส้นบรรทัดซ้าย และด้านล่าง */
.left_bottom {
border-left:2px solid #000;
border-bottom:1px solid #000;
}
/* กำหนดเส้นบรรทัดซ้าย ขวา และด้านล่าง */
.left_right_bottom {
border-left:2px solid #000;
border-bottom:1px solid #000;
border-right:2px solid #000;
}
/* สร้างช่องสี่เหลี่ยมสำหรับเช็คเลือก */
.chk_box {
display:block;
width:10px;
height:10px;
overflow:hidden;
border:1px solid #000;
}
/* css ส่วนสำหรับการแบ่งหน้าข้อมูลสำหรับการพิมพ์ */
@media all
{
.page-break { display:none; }
.page-break-no{ display:none; }
}
@media print
{
.page-break { display:block;height:1px; page-break-before:always; }
.page-break-no{ display:block;height:1px; page-break-after:avoid; }
}
</style>
</head>
<body>
<?php for($i=1;$i<=5;$i++){ ?>
<div class="page-break<?=($i==1)?"-no":""?>"> </div>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left">Page <?=$i?></td>
</tr>
<tr>
<td align="center" class="headTitle" style="font-size:15px;">ใบรับฝากรวม<br />
RECEIPT FOR BULK POSTING <br /></td>
</tr>
<tr>
<td align="left"><table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td align="center"><div class="chk_box"></div></td>
<td align="left">ไปรษณียภัณฑ์</td>
<td align="center"><div class="chk_box"></div></td>
<td align="left">ลงทะเบียน</td>
<td align="center"><div class="chk_box"></div></td>
<td align="left">รับรอง</td>
</tr>
<tr>
<td>ได้รับฝาก</td>
<td align="center"> </td>
<td align="left">Letter-Post items</td>
<td align="center"> </td>
<td align="left">Registered</td>
<td> </td>
<td align="left">Certified</td>
</tr>
<tr>
<td>Received</td>
<td align="center"><div class="chk_box"></div></td>
<td align="left">พัสดุไปรษณีย์</td>
<td align="center"><div class="chk_box"></div></td>
<td align="left">รับประกัน</td>
<td> </td>
<td align="left"> </td>
</tr>
<tr>
<td> </td>
<td align="center"> </td>
<td align="left">Parcels</td>
<td align="center"> </td>
<td align="left">Insured</td>
<td> </td>
<td align="left"> </td>
</tr>
</table></td>
</tr>
<tr>
<td align="left"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="200" align="center"> ไว้ดังนี้ ตราประจำวัน</td>
</tr>
<tr>
<td>จาก
<input name="textfield" type="text" class="box_data1" id="textfield" style="text-align:left;width:500px;" /></td>
<td align="center">As Follows Date Stamp</td>
</tr>
</table></td>
</tr>
<tr>
<td align="left">From</td>
</tr>
<tr>
<td align="left"><table width="750" border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-top:5px double #000;">
<tr>
<td width="50" rowspan="2" class="headerTitle01" align="center" valign="middle">ลำดับ<br />
No.</td>
<td width="200" rowspan="2" class="headerTitle01" align="center" valign="middle">นามผู้รับ<br />
Name Of Addressee</td>
<td width="130" rowspan="2" class="headerTitle01" align="center" valign="middle">ปลายทาง<br />
Destination</td>
<td width="70" rowspan="2" class="headerTitle01" align="center" valign="middle">เลขที่<br />
Number</td>
<td width="100" rowspan="2" class="headerTitle01" align="center" valign="middle">น้ำหนัก (กรัม)<br />
Weight (Grammes)</td>
<td colspan="2" class="headerTitle01" align="center" valign="bottom">ค่าบริการ<br />
Postal Charge</td>
<td width="100" rowspan="2" class="headerTitle01_r" align="center" valign="middle">หมายเหตุ<br />
Remarks</td>
</tr>
<tr>
<td width="70" align="center" valign="bottom" class="headerTitle01">บาท<br />
Baht</td>
<td width="30" class="headerTitle01" align="center" valign="bottom">สต.
Stg.</td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">1</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">2</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">3</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">4</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">5</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">6</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">7</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">8</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">9</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">10</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td colspan="4" align="left" style="border-top:2px solid #000;">รวมทั้งสิ้น
Total
<input name="textfield2" type="text" class="box_data1" id="textfield2" style="text-align:center;width:250px;" />
ฉบับ/ห่อ
Pieces</td>
<td align="center" style="border-top:2px solid #000;">เป็นเงิน
Amount</td>
<td height="20" align="left" class="left_bottom" style="border-bottom:5px double #000;border-top:2px solid #000;"> </td>
<td align="left" class="left_right_bottom" style="border-bottom:5px double #000;border-top:2px solid #000;"> </td>
<td align="left" style="border-top:2px solid #000;"> </td>
</tr>
</table></td>
</tr>
<tr>
<td align="left"> </td>
</tr>
<tr>
<td align="left"> </td>
</tr>
<tr>
<td align="left"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" align="left">- ใบรับฝากนี้ใช้เป็นหลักฐานการฝากส่ง โปรดเก็บรักษาไว้จนหมดอายุ<br />
การสอบสวน คือ ระยะเวลา 6 เดือน นับจากวันต่อจากวันที่ฝากส่ง<br /></td>
<td width="50%" align="left"> </td>
</tr>
<tr>
<td align="left">- การติดต่อในเรื่องใดเกี่ยวกับการฝากส่ง ต้องนำใบฝากฉบับนี้<br />
มาแสดงทุกครั้ง มิฉะนั้น ปณท อาจไม่ทำการตรวจสอบหรือสอบสวนให้</td>
<td align="left"><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100" align="right">พนักงานรับฝาก</td>
<td width="62%"><input name="textfield10" type="text" class="box_data1" id="textfield10" style="text-align:center;width:200px;" /></td>
</tr>
<tr>
<td align="right">Counter Clerk</td>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<?php } ?>
</body>
</html>
ตัวอย่างโค้ดข้างต้น เป็นการสมมติ การวนลูปแสดงข้อมูลอย่างต่อเนื่อง
โดยมีการกำหนด ส่วนสำหรับแบ่งการพิมพ์ ด้วย โค้ด PHP ร่วมกับ CSS
<div class="page-break<?=($i==1)?"-no":""?>"> </div>
ซึ่งหมายถึง ถ้าเป็น ข้อมูลแรก $i==1 ให้แสดง
div ที่มี class เท่ากับ page-break-no คือยังไม่ต้องเริ่มทำการแบ่งหน้าสำหรับพิมพ์
แต่ถ้าข้อมูลที่ไม่ใช่ข้อมูลแรก ให้เริ่มทำการแบ่งหน้าสำหรับการพิมพ์ด้วย การกำหนด
div ให้มี class เท่ากับ page-break
ทดสอบตัวอย่างตามลิ้งค์ด้านล่าง
http://www.ninenik.com/demo/css_report_table2.php
เมื่อเข้าไปที่หน้าดังกล่าว แล้วให้คลิกขวา แล้วเลือก print preview
จะเห็นว่า แม้ข้อมูลที่แสดง จะเรียกต่อเนื่องกัน
แต่ข้อมูลสำหรับการพิมพ์ จะมีการแบ่งหน้าให้อัตโนมัติ ตามตำแหน่งที่เรากำหนด
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
06 Jan 09 สร้างฟังก์ชัน javascript เช็ค check email อย่างง่าย อ่าน 5923 03 Aug 11 ใช้งาน google chart ตัวใหม่สร้าง poll อย่างง่าย อ่าน 1292 08 Oct 08 การสร้างปุ่มด้วย CSS อ่าน 4677 23 Jun 11 การสร้าง active เมนู อย่างง่าย ด้วย css และ php อ่าน 1804 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 7993 12 Aug 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อน ซ้าย ขวา คล้าย marquee อ่าน 2628 17 Dec 10 สร้าง php ฟังก์ชัน ตราจสอบ ก่อนถึงวันหมดอายุ อย่างง่าย อ่าน 1907 08 Oct 08 คำสั่ง SQL DISTINCT อ่าน 4956 11 May 10 การจัดข้อความ text direction rotation หมุนข้อความ แนวตั้ง ด้วย css ในตาราง อ่าน 3253 19 Aug 09 สร้าง เมนูแท็บ Tabs อย่างง่าย ด้วย jQuery UI อ่าน 10648 03 Sep 10 จัดรูปแบบ url ลิ้งค์ link ด้วย เทคนิค php ได้อย่างง่าย อ่าน 2537 01 Dec 10 การใช้งาน polyline และ polygon ใน google map api v3 อ่าน 3766 25 Sep 08 การทำปุ่ม Print แบบรูปภาพ อ่าน 4076 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 3700 22 Mar 10 ทบทวนคำสั่ง break และ continue ใน javascript อ่าน 2487 09 Jul 10 เพิ่มความเร็ว ให้กับการ cache ด้วย jquery ajax และ php cache class อ่าน 2342 28 May 10 แสดง การแจ้งเตือน ให้เปิด หรือ บันทึกไฟล์ที่ดาวน์โหลด ด้วย php อ่าน 1258 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 2980 13 Oct 08 คำสั่ง SQL AND OR อ่าน 3127 31 Aug 10 เทคนิค php ใช้ fgets และ javascript วนลูป loop อ่านไฟล์ ขนาดใหญ่ อ่าน 1648