ฉันต้องการหลีกเลี่ยงการแบ่งหน้าภายในแถวของตารางใน html เมื่อฉันแปลง html เป็น PDF โดย wkhtmltopdf ฉันใช้ page-break-inside: หลีกเลี่ยงด้วย table - มันใช้งานได้ แต่ฉันมีหลายแถวแล้วไม่ทำงาน หากตั้งค่าการแสดงtr เป็นบล็อกหรืออย่างอื่นมันจะเปลี่ยนการจัดรูปแบบของตารางและใส่เส้นขอบคู่ หรือเป็นไปได้ที่จะแทรกส่วนหัวของตารางในแต่ละหน้าซึ่งตารางถูกแยกออก

คุณอาจลองใช้ CSS:

<table class="print-friendly">
 <!-- The rest of your table here -->
</table>

<style>
    table.print-friendly tr td, table.print-friendly tr th {
        page-break-inside: avoid;
    }
</style>

กฎ CSS ส่วนใหญ่ใช้ไม่ได้กับ<tr>แท็กโดยตรงเนื่องจากสิ่งที่คุณได้ระบุไว้ข้างต้น - displayกฎเหล่านี้มีลักษณะเฉพาะซึ่งไม่อนุญาตให้ใช้กฎ CSS เหล่านี้ อย่างไรก็ตาม<td>และ<th>แท็กภายในพวกเขามักจะทำช่วยให้ชนิดของข้อกำหนดนี้ - และคุณสามารถใช้กฎดังกล่าวไปทั้งหมด child- <tr>'และ<td>' s ใช้ CSS ที่แสดงข้างต้น

วิธีที่ดีที่สุดที่ฉันพบในการจัดการกับปัญหานี้ในเบราว์เซอร์ webkit คือใส่ div ไว้ในแต่ละองค์ประกอบ td และใช้ page-break-inside: หลีกเลี่ยงสไตล์กับ div เช่นนี้:

...
<td>
  <div class="avoid">
    Cell content.
  </div>
</td>
...
<style type="text/css">
  .avoid {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }
</style>

แม้ว่า Chrome จะไม่รู้จัก 'page-break-inside: หลีกเลี่ยง;' คุณสมบัตินี้ดูเหมือนว่าจะป้องกันไม่ให้เนื้อหาแถวถูกแบ่งครึ่งโดยการแบ่งหน้าเมื่อใช้ wktohtml เพื่อสร้าง PDF องค์ประกอบ tr อาจค้างอยู่บนหน้าแตกเล็กน้อย แต่ div และอะไรก็ตามที่อยู่ข้างในจะไม่

ฉันใช้เคล็ดลับ 4px โดย @AaronHill ด้านบน ( ลิงค์ ) และมันก็ใช้ได้ดีจริงๆ! ฉันใช้กฎ css ที่ง่ายกว่าโดยไม่จำเป็นต้องเพิ่มคลาสให้กับแต่ละ<td>ตารางในตาราง

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }
}

ฉันพบวิธีใหม่ในการแก้ปัญหานี้อย่างน้อยสำหรับฉัน (Chrome เวอร์ชัน 63.0.3239.84 (รุ่นอย่างเป็นทางการ) (64 บิต) บน MacOS Sierra)

เพิ่มกฎ CSS ในตารางหลัก:

table{
    border-collapse:collapse;
}

และสำหรับ td:

tr td{
    page-break-inside: avoid;
    white-space: nowrap;
}

ฉันพบโซลูชันนี้จริงใน Stack Overflow แต่ไม่ปรากฏในการค้นหาครั้งแรกของ Google: CSS เพื่อหยุดการแบ่งหน้าภายในแถวตาราง

ขอชื่นชม @ Ibrennan208 สำหรับการแก้ปัญหา!

การใช้ CSS page-break-inside จะไม่ได้ผล (นี่คือปัญหาของเบราว์เซอร์ webkit)

มีแฮ็คการแบ่งตาราง JavaScript wkhtmltopdf ซึ่งแบ่งตารางยาวออกเป็นตารางเล็ก ๆ โดยอัตโนมัติขึ้นอยู่กับขนาดหน้าที่คุณระบุ (แทนที่จะทำลายหน้าหลังจากค่าคงที่ x แถว): https://gist.github.com/3683510

ฉันเขียน JavaScript ต่อไปนี้ตามคำตอบของ Aaron Hill:

//Add a div to each table cell so these don't break across pages when printed
//See http://stackoverflow.com/a/17982110/201648
$(document).ready(function () {
    var ctlTd = $('.dontSplit td');
    if (ctlTd.length > 0)
    {
        //console.log('Found ctlTd');
        ctlTd.wrapInner('<div class="avoidBreak" />');
    }
});

โดยที่dontSplitคือคลาสของตารางที่คุณไม่ต้องการให้ td แบ่งหน้า ใช้สิ่งนี้กับ CSS ต่อไปนี้ (อีกครั้งมาจาก Aaron Hill):

 .avoidBreak {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }

ดูเหมือนว่าจะทำงานได้ดีใน Chrome เวอร์ชันล่าสุด

วิธีเดียวที่ฉันพบว่าได้ผลคือวางองค์ประกอบ TR แต่ละองค์ประกอบไว้ในองค์ประกอบ TBODY ของตัวเองและใช้กฎการแบ่งหน้ากับองค์ประกอบ TBODY ผ่าน css

ลองด้วย

white-space: nowrap; 

สไตล์เป็น td เพื่อหลีกเลี่ยงไม่ให้มันแตกไลน์ใหม่

ฉันได้พบว่าpage-break-inside: avoidจะไม่ทำงานถ้าใด ๆ ของตารางองค์ประกอบที่ผู้ปกครองมีหรือdisplay: inline-block ตรวจสอบให้แน่ใจทุกองค์ประกอบของผู้ปกครองที่มีflexdisplay: block

ยังพิจารณาเอาชนะtable, tr, td's displayรูปแบบด้วย CSS gridสำหรับรูปแบบการพิมพ์ถ้าคุณเก็บประเด็นที่มีกับตาราง

โซลูชันปี 2020

สิ่งเดียวที่ฉันอย่างต่อเนื่องจะได้รับการทำงานบนเบราว์เซอร์ทั้งหมดคือการใส่แต่ละแถวภายในองค์ประกอบโต๊ะของตัวเอง นอกจากนี้ยังใช้ได้กับโหนด HTML-PDF page-break-inside: avoidแล้วก็ชุดทุกอย่างเพื่อ

table,
tr,
td,
div {
    page-break-inside: avoid;
}

ข้อเสียประการเดียวคือคุณต้องกำหนดความกว้างของคอลัมน์ด้วยตนเองมิฉะนั้นจะดูแปลก ต่อไปนี้ทำงานได้ดีสำหรับฉันด้วยสองคอลัมน์

td:first-child { width: 30% }
td:last-child { width: 70% }

ตัวอย่าง

<table>
  <tr>
    <td>Forename</td>
    <td>John</td>
  </tr>
</table>
<table>
  <tr>
    <td>Surname</td>
    <td>Piper</td>
  </tr>
</table>
<table>
  <tr>
    <td>Website</td>
    <td>desiringgod.org</td>
  </tr>
</table>

นี่เป็นคำถามเก่า แต่ฉันพบข้อผิดพลาดเดียวกันนี้เมื่อเร็ว ๆ นี้ ปัญหาในกรณีของฉันเกี่ยวข้องกับtable-responsiveคลาสของ Bootstrap ซึ่งถูกใช้โดยไม่ได้ตั้งใจ<table>องค์ประกอบ

ดังนั้นหากคุณมีปัญหาเดียวกันให้ลองลบออกtable-responsiveจาก<table>ชั้นเรียนเมื่อโทรไปที่ wkhtmltopdf