title: Print only HTML Table from page
body: <p>I have a page that has a lot of elements on it - Buttons, Tiles, Tables, Lists, etc. I am wanting to only print ONE of the HTML tables when I click my print button.... I am needing to do this via <code>css</code> and <code>html</code>, what is the bets way to accomplish this? I have the following, but this prints the entire page:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> &lt;style media="screen"&gt;
      .noPrint {
          display: block;
      }
  
      .yesPrint {
          display: block !important;
      }
  &lt;/style&gt;
  
  &lt;style media="print"&gt;
      .noPrint {
          display: none;
      }
  
      .yesPrint {
          display: block !important;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="table-responsive yesPrint"&gt;
        &lt;table class="table table-striped table-bordered table-hover"&gt;
               &lt;thead&gt;
                   &lt;tr&gt;
                      &lt;th style="text-align: left; font-size: 15px;"&gt;Number&lt;/th&gt;
                      &lt;th style="text-align: left; font-size: 15px;"&gt;Caller&lt;/th&gt;
                      &lt;th style="text-align: left; font-size: 15px;"&gt;Description&lt;/th&gt;
                    &lt;/tr&gt;
                    &lt;/thead&gt;
                       &lt;tbody&gt;
                          &lt;tr&gt;
                             &lt;td style="text-align: left; font-size: 13px;"&gt;Number&lt;/td&gt;
                             &lt;td style="text-align: left; font-size: 13px;"&gt;Name&lt;/td&gt;
                             &lt;td style="text-align: left; font-size: 13px;"&gt;Here is the short description&lt;/td&gt;
                          &lt;/tr&gt;
                       &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;input type="button" onclick="window.print()"/&gt;
  &lt;/div&gt;
  </code></pre>