Chrome printing is cutting off text between tr element for multi-column css
<p>How do I prevent this behavior? </p>

<p><a href="https://plnkr.co/edit/QoO2hWmXVhSCSyA4bUh4?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/QoO2hWmXVhSCSyA4bUh4?p=preview</a></p>

<pre><code>&lt;style type="text/css"&gt;
            table {
                border-collapse: collapse;
            }

            table, th, td {
                border: 1px solid black;
            }
            @page {
                size: auto;   /* auto is the initial value */
                margin: 5mm 7mm 5mm 7mm; /* margin you want for the content */
            }

            html {
                background-color: #FFFFFF;
                margin: 0px; /* this affects the margin on the html before sending to printer */
            }
            table { page-break-inside: avoid }
            tr    { page-break-inside: avoid; page-break-after: avoid }
            thead { display: table-header-group }
            tfoot { display: table-footer-group }
            .paper {
                font-size: 11pt;
                -webkit-print-color-adjust: exact;
                -moz-column-count: 2;
                -moz-column-gap: 10px;
                -webkit-column-count: 2;
                -webkit-column-gap: 10px;
                column-count: 2;
                column-gap: 10px;
            }

            .website {
                font-size: 11pt;
                -webkit-print-color-adjust: exact;
                -moz-column-count: 2;
                -moz-column-gap: 10px;
                -webkit-column-count: 2;
                -webkit-column-gap: 10px;
                column-count: 2;
                column-gap: 10px;
            }

            .inline {
                -webkit-print-color-adjust: exact;
                display: inline-block;
                width: 100%;
            }

            .customer-color {
                -webkit-print-color-adjust: exact;
                background-color: rgba(38, 194, 129, 0.1);
            }

            .partner-color {
                -webkit-print-color-adjust: exact;
                background-color: rgba(227, 91, 90, 0.1);
            }
        &lt;/style&gt;
</code></pre>

<p>This is my css styling. You can try printing from plunkr and will see that this occurs,
<a href="https://i.stack.imgur.com/tGhO5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tGhO5.png" alt="enter image description here"></a>
I have tried the solution from following post, <a href="https://stackoverflow.com/questions/3322891/why-is-chrome-cutting-off-text-in-my-css3-multi-column-layout">Why is Chrome cutting off text in my CSS3 multi-column layout?</a> but couldn't fix the problem. The post seems to be from 2010 so perhaps there is a new solution for 2016?</p>