<!DOCTYPE html>
<style>
body { overflow: hidden; } /* Avoid triggering a second layout pass, as that might hide bugs. */
table { border-spacing:0; line-height:2em; }
tr { break-inside:avoid; }
td { padding:0; background:red; }
td > div { width:1em; background:green; }
</style>
<p>There should be a green square and no red below.</p>
<div style="columns:2; column-fill:auto; column-gap:0; width:4em; height:5.5em;">
    <table>
        <tr>
            <td><div><br><br></div></td>
            <td><div><br><br></div></td>
        </tr>
        <tr>
            <td><div><br><br></div></td>
            <td><div><br><br></div></td>
        </tr>
    </table>
</div>