title: Chrome printing is cutting off text between tr element for multi-column css
body: <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>