table-fragmentation-003c-print-ref.html (1245B)
1 <!DOCTYPE html> 2 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 3 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> 5 6 <style> 7 @page { size: 5in 3in; margin: 0.5in; } 8 :root { 9 print-color-adjust: exact; 10 } 11 body { margin: 0; } 12 13 .table { 14 inline-size: 3in; 15 box-sizing: border-box; 16 border: 0.25in solid black; 17 padding: 0.125in 0.25in; 18 box-decoration-break: clone; 19 } 20 .thead { 21 block-size: 0.25in; 22 background: blue; 23 } 24 .tbody { 25 border: 0 solid orange; 26 margin-block: 0.125in; 27 background: gold; 28 } 29 .tfoot { 30 block-size: 0.25in; 31 background: purple; 32 } 33 </style> 34 35 <div class="table"> 36 <!-- Page 1 --> 37 <div class="thead" style="margin-block-start: 0.125in;"></div> 38 <div class="tbody" style="border-block-start-width: 0.25in; block-size: 0.125in;"></div> 39 <div class="tfoot"></div> 40 41 <!-- Page 2 --> 42 <div class="thead"></div> 43 <div class="tbody" style="block-size: 0.5in;"></div> 44 <div class="tfoot"></div> 45 46 <!-- Page 3 --> 47 <div class="thead"></div> 48 <div class="tbody" style="border-block-end-width: 0.25in; block-size: 0.125in;"></div> 49 <div class="tfoot" style="margin-block-end: 0.125in;"></div> 50 </div>