| <!DOCTYPE html> |
| <style> |
| table { border-spacing:20px; } |
| td { padding:0; } |
| .square { width:30px; height:30px; background:blue; } |
| thead { break-inside:avoid; } |
| </style> |
| <p>There should be 2 squares below, and they should not be overlapping.</p> |
| <div style="columns:2; width:200px; column-fill:auto; column-gap:0; height:295px;"> |
| <div style="height:240px;"></div> |
| <table style="width:100%;"> |
| <thead> |
| <td><div class="square"></div></td> |
| </thead> |
| <caption style="width:100%; caption-side:bottom;"> |
| <div class="square"></div> |
| </caption> |
| </table> |
| </div> |