table-cell-vertical-align-002-print.html (1512B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 4 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1648947"> 6 <link rel="match" href="table-cell-vertical-align-002-print-ref.html"> 7 8 <style> 9 @page { size: 5in 3in; margin: 0.5in; } 10 body { margin: 0; } 11 12 table { 13 border-spacing: 0; 14 } 15 tbody:nth-child(1) > tr { 16 background: cyan; 17 } 18 tbody:nth-child(2) > tr { 19 background: yellow; 20 } 21 td { 22 padding: 0; 23 } 24 ol { 25 margin: 0; 26 } 27 </style> 28 29 <table> 30 <tbody> 31 <!-- This table row can be fit in the first page. The table-cells' 32 vertical-align should be respected. 33 --> 34 <tr> 35 <td style="vertical-align: baseline"> 36 <ol> 37 <li></li><li></li><li></li><li></li> 38 </ol> 39 </td> 40 <td style="vertical-align: bottom">bottom</td> 41 </tr> 42 </tbody> 43 <tbody> 44 <!-- This table row is fragmented across page boundary, and that makes Firefox 45 force table-cells to behave as if they have vertical-align:top, to avoid 46 data loss from the complexity of fragmenting arbitrarily-aligned cells. 47 --> 48 <tr> 49 <td style="vertical-align: baseline"> 50 <ol> 51 <li></li><li></li><li></li><li></li> 52 <li></li><li></li><li></li><li></li> 53 <li></li><li></li><li></li><li></li> 54 </ol> 55 </td> 56 <td style="vertical-align: bottom">bottom</td> 57 </tr> 58 </tbody> 59 </table>