title: Hide table rows for @media print
body: <p>I have a table of data and each row has a checkbox that when checked indicates that the user would like that row to be included in the printed table. When the row is checked JQuery adds a print class to the :</p>
  
  <pre><code>$("td .checkbox").click(function(e){
      if (this.checked) {
          $("#tr-"+this.id).addClass("print");
      } else {
          $("#tr-"+this.id).removeClass("print");
      }
  });
  </code></pre>
  
  <p>Edit: Adding HTML to show the id and class for answer below...</p>
  
  <pre><code>&lt;tr id="tr-print-0" class="search-line-item-0 print"&gt;
      &lt;td&gt;data&lt;/td&gt;
      &lt;td&gt;data...&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox" id="print-0" name="print-0"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="tr-print-1" class="search-line-item-1"&gt;...
  &lt;tr id="tr-print-2" class="search-line-item-0"&gt;...
  </code></pre>
  
  <p>Then in my CSS file I have @media print{} which sets the row's display to none or block.</p>
  
  <pre><code>tr.search-line-item-0, tr.search-line-item-1 {
      display: none;
  }
  
  tr.search-line-item-0.print, tr.search-line-item-1.print {
      display: block;
  }
  </code></pre>
  
  <p>The issue is when you print the page only the rows with display:block show up, which is the intended behavior, but it looks like each row is being rendered inside of the first column (the first <code>&lt;th&gt;</code> spans the <code>&lt;tr&gt;</code> and then all the other <code>&lt;th&gt;</code>s have nothing below them). Only tested in Chrome and Firefox so far and the issue is the same in both browsers.</p>
  
  <p>The goal is to have a quick way of checking rows and printing them without opening other windows or using an iframe. So if anyone knows an alternate solution that would work too :)</p>