| <!DOCTYPE html> |
| <style> |
| .header { |
| background-color: blue; |
| height: 60px; |
| } |
| tr { |
| break-inside: avoid; |
| } |
| </style> |
| <p>crbug.com/759195: Headers and footers should be placed correctly.</p> |
| <div style="columns:3; column-fill: auto; height:412px; background-color: yellow;"> |
| <table cellpadding=0 cellspacing=0> |
| <tr> |
| <td> |
| <div class="header"> |
| HEADER |
| </div> |
| </td> |
| </tr> |
| <tr><td><div style="height: 210px; width: 1px;"></div></td></tr> |
| <tr> |
| <td> |
| <table cellpadding="0" cellspacing="0" style="line-height: 20px; width:200px;"> |
| <tr> |
| <td style="width:64px"><strong>Col 1</strong></td> |
| <td style="width:80px"><strong>Col 2</strong></td> |
| <td style="width:75px"><strong>Col 3</strong></td> |
| <td style="width:95px"><strong>Col 4</strong></td> |
| <td style="width:115px"><strong>Col 5</strong></td> |
| </tr> |
| <tr> |
| <td style="height:40px">0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| <tr><td><div style="height: 2px; width: 1px;"></div></td></tr> |
| <tr> |
| <td> |
| <div class="header"> |
| FOOTER |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <div class="header"> |
| HEADER |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <table id="inner" width=200px; cellpadding="0" cellspacing="0" style="line-height: 20px;"> |
| <tr> |
| <td style="width:64px"><strong>Col 1</strong></td> |
| <td style="width:80px"><strong>Col 2</strong></td> |
| <td style="width:75px"><strong>Col 3</strong></td> |
| <td style="width:95px"><strong>Col 4</strong></td> |
| <td style="width:115px"><strong>Col 5</strong></td> |
| </tr> |
| <tr> |
| <td style="height:40px">0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| </tr> |
| <tr> |
| <td style="height:40px">0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| </tr> |
| <tr> |
| <td style="height:40px">0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| </tr> |
| <tr> |
| <td style="height:40px">0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| </tr> |
| <tr> |
| <td style="height:40px">0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| </tr> |
| <tr> |
| <td style="height:40px">0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| <tr><td><div style="height: 12px; width: 1px;"></div></td></tr> |
| <tr> |
| <td> |
| <div class="header"> |
| FOOTER |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <div class="header"> |
| HEADER |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <table id="inner" width=200px; cellpadding="0" cellspacing="0" style="line-height: 20px;"> |
| <tr> |
| <td style="width:64px"><strong>Col 1</strong></td> |
| <td style="width:80px"><strong>Col 2</strong></td> |
| <td style="width:75px"><strong>Col 3</strong></td> |
| <td style="width:95px"><strong>Col 4</strong></td> |
| <td style="width:115px"><strong>Col 5</strong></td> |
| </tr> |
| <tr> |
| <td style="height:40px">0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| </tr> |
| <tr> |
| <td style="height:40px">0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| <td>0</td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <div class="header"> |
| FOOTER |
| </div> |
| </td> |
| </tr> |
| </table> |
| </div> |