ฉันมีโครงการที่ต้องพิมพ์ตาราง HTML ที่มีหลายแถว
ปัญหาของฉันคือวิธีพิมพ์ตารางในหลาย ๆ หน้า บางครั้งมันจะตัดแถวครึ่งทำให้ไม่สามารถอ่านได้เพราะครึ่งหนึ่งอยู่ที่ขอบเลือดออกของหน้ากระดาษและส่วนที่เหลือจะพิมพ์ที่ด้านบนของหน้าถัดไป
ทางออกที่เป็นไปได้เพียงอย่างเดียวที่ฉันคิดได้คือใช้ DIV แบบเรียงซ้อนแทนที่จะใช้ตารางและบังคับให้หยุดพักหน้าหากจำเป็น .. แต่ก่อนที่จะผ่านการเปลี่ยนแปลงทั้งหมดฉันคิดว่าฉันสามารถถามได้ที่นี่ก่อน
คำตอบ:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
หมายเหตุ: เมื่อใช้การแบ่งหน้า - หลัง: สำหรับแท็กเสมอมันจะสร้างตัวแบ่งหน้าหลังจากบิตสุดท้ายของตารางการสร้างหน้าว่างเปล่าทั้งหมดในตอนท้ายทุกครั้ง! ในการแก้ไขปัญหานี้ให้เปลี่ยนเป็น page-break-after: auto มันจะพังอย่างถูกต้องและไม่สร้างหน้าว่างพิเศษ
<html>
<head>
<style>
@media print
{
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>
<body>
....
</body>
</html>
การขยายจากโซลูชัน Sinan Ünür:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
div { page-break-inside:avoid; } /* This is the key */
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
ดูเหมือนว่าpage-break-inside:avoidในบางเบราว์เซอร์จะพิจารณาเฉพาะองค์ประกอบของบล็อกไม่ใช่สำหรับเซลล์ตารางแถวหรือทั้งบล็อกแบบอินไลน์
หากคุณลองdisplay:blockใช้TRแท็กและใช้งานpage-break-inside:avoidได้จะทำงานได้ แต่ยุ่งกับเค้าโครงตารางของคุณ
$(document).ready(function(){$("table tbody th, table tbody td").wrapInner("<div></div>");});
tr { display: block; }สำหรับพิมพ์อย่างเดียวแทนที่จะเพิ่ม<div>องค์ประกอบที่ไม่เกี่ยวข้องทั้งหมด (ยังไม่ได้ทดสอบ แต่ควรดูที่)
ไม่มีคำตอบที่นี่สำหรับฉันใน Chrome AAverin บน GitHub ได้สร้างJavascript ที่มีประโยชน์สำหรับวัตถุประสงค์นี้และสิ่งนี้ได้ผลสำหรับฉัน:
เพียงเพิ่ม js ลงในโค้ดของคุณและเพิ่มคลาส 'splitForPrint' ลงในตารางของคุณและจะแบ่งตารางออกเป็นหลายหน้าอย่างเรียบร้อยและเพิ่มส่วนหัวของตารางลงในแต่ละหน้า
splitForPrintแต่ใน JS มีที่ไหนเลยที่จะเอาการอ้างอิงขององค์ประกอบโดยใช้ splitForPrintclassName เฉพาะส่วนที่var splitClassName = 'splitForPrint';แต่นั่นมัน
ใช้คุณสมบัติ CSS เหล่านี้:
page-break-after
page-break-before
ตัวอย่างเช่น
<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>
<body>
....
</body>
</html>
ฉันเพิ่งแก้ไขปัญหานี้ด้วยโซลูชันที่ดี
CSS :
.avoidBreak {
border: 2px solid;
page-break-inside:avoid;
}
JS :
function Print(){
$(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") });
$(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
window.print();
}
ทำงานเหมือนจับใจ!
ฉันลงเอยด้วยการทำตามวิธีการของ @ vicenteherrera ด้วยการปรับแต่งบางอย่าง
โดยทั่วไป; เราไม่สามารถทำลายtrs หรือtdเพราะมันไม่ใช่องค์ประกอบระดับบล็อก ดังนั้นเราจึงฝังdivs ในแต่ละและใช้ของเรากฎกับpage-break-* divประการที่สอง; เราเพิ่มช่องว่างไว้ด้านบนของแต่ละ divs เหล่านี้เพื่อชดเชยสิ่งประดิษฐ์สไตล์ใด ๆ
<style>
@media print {
/* avoid cutting tr's in half */
th div, td div {
margin-top:-8px;
padding-top:8px;
page-break-inside:avoid;
}
}
</style>
<script>
$(document).ready(function(){
// Wrap each tr and td's content within a div
// (todo: add logic so we only do this when printing)
$("table tbody th, table tbody td").wrapInner("<div></div>");
})
</script>การปรับระยะขอบและการบุนวมนั้นจำเป็นต่อการชดเชยส่วนที่กระวนกระวายใจซึ่งถูกนำมาใช้ (โดยการเดาของฉัน - จาก bootstrap) ฉันไม่แน่ใจว่าฉันกำลังนำเสนอทางออกใหม่จากคำตอบอื่น ๆ สำหรับคำถามนี้ แต่ฉันคิดว่านี่อาจจะช่วยใครซักคน
ฉันประสบปัญหาเดียวกันและค้นหาวิธีแก้ปัญหาทุกหนทุกแห่งในที่สุดฉันก็พบสิ่งที่เหมาะกับฉันสำหรับเบราว์เซอร์ทุกตัว
html {
height: 0;
}ใช้ css นี้หรือแทน css คุณสามารถใช้ javascript นี้ได้
$("html").height(0);หวังว่าสิ่งนี้จะได้ผลสำหรับคุณเช่นกัน
ฉันตรวจสอบโซลูชันมากมายและทุกคนทำงานได้ไม่ดี
ดังนั้นฉันจึงลองกลอุบายเล็ก ๆ และใช้งานได้:
tfoot with style: position: fixed; bottom: 0px;
ถูกวางไว้ที่ด้านล่างของหน้าสุดท้าย แต่ถ้าส่วนท้ายสูงเกินไปมันจะทับซ้อนกับเนื้อหาของตาราง
tfoot ที่มีเท่านั้น: display: table-footer-group;
ไม่ได้ซ้อนทับกัน แต่ไม่ได้อยู่ที่ด้านล่างของหน้าสุดท้าย ...
ลองใส่ tfoot สองอัน:
TFOOT.placer {
display: table-footer-group;
height: 130px;
}
TFOOT.contenter {
display: table-footer-group;
position: fixed;
bottom: 0px;
height: 130px;
}<TFOOT class='placer'>
<TR>
<TD>
<!-- empty here
-->
</TD>
</TR>
</TFOOT>
<TFOOT class='contenter'>
<TR>
<TD>
your long text or high image here
</TD>
</TR>
</TFOOT>หนึ่งสำรองอยู่ในหน้าสุดท้ายไม่ใช่อันดับที่สองใส่ไว้ในส่วนท้ายของคุณ
ฉันได้ลองใช้คำแนะนำทั้งหมดที่ให้ไว้ข้างต้นแล้วและพบวิธีแก้ไขปัญหาเบราว์เซอร์ข้ามที่เรียบง่ายและใช้งานได้สำหรับปัญหานี้ ไม่จำเป็นต้องใช้สไตล์หรือตัวแบ่งหน้าสำหรับโซลูชันนี้ สำหรับวิธีแก้ปัญหารูปแบบของตารางควรเป็นดังนี้:
<table>
<thead> <!-- there should be <thead> tag-->
<td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
</thead>
<tbody><!---<tbody>also must-->
<tr>
<td>data</td>
</tr>
<!--100 more rows-->
</tbody>
</table>รูปแบบข้างต้นผ่านการทดสอบและทำงานในเบราว์เซอร์ข้าม
เอาล่ะ ... โซลูชั่นส่วนใหญ่ที่นี่ไม่ได้ผล ดังนั้นนี่คือสิ่งที่ทำงานให้ฉัน ..
HTML
<table>
<thead>
<tr>
<th style="border:none;height:26px;"></th>
<th style="border:none;height:26px;"></th>
.
.
</tr>
<tr>
<th style="border:1px solid black">ABC</th>
<th style="border:1px solid black">ABC</th>
.
.
<tr>
</thead>
<tbody>
//YOUR CODE
</tbody>
</table>ชุดแรกของหัวจะใช้เป็นหุ่นจำลองเพื่อไม่ให้มีเส้นขอบด้านบนหายไปในหัวที่ 2 (เช่นหัวเดิม) ในขณะที่ตัวแบ่งหน้า
คำตอบที่ยอมรับไม่ได้ผลสำหรับฉันในเบราว์เซอร์ทั้งหมด แต่ css ต่อไปนี้ใช้งานได้สำหรับฉัน:
tr
{
display: table-row-group;
page-break-inside:avoid;
page-break-after:auto;
}โครงสร้าง HTML คือ:
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
...
</tbody>
</table>ในกรณีของฉันมีปัญหาเพิ่มเติมบางอย่างด้วยthead trแต่วิธีนี้แก้ไขปัญหาเดิมของการเก็บแถวตารางไม่ให้แตก
เนื่องจากปัญหาส่วนหัวของฉันในที่สุดฉันก็จบลงด้วย:
#theTable td *
{
page-break-inside:avoid;
}สิ่งนี้ไม่ได้ป้องกันไม่ให้แถวแตกหัก เพียงเนื้อหาของแต่ละเซลล์
<thead>ลงในตารางของคุณด้วย css ต่อไปนี้thead {display: table-header-group; }เพื่อพิมพ์ส่วนหัวของตารางในหน้าถัดไปทั้งหมด (มีประโยชน์สำหรับตารางข้อมูล loooooong)