title: How do I get rid of the top border on this table header?
body: <p>I am using bootstrap 2.3.2 and have a table with 2 headers (only 1 header will be shown at one time). Here's <a href="http://jsfiddle.net/4GQVK/" rel="nofollow">my fiddle</a></p>
  
  <pre><code>&lt;table class="table table-hover"&gt;
      &lt;thead&gt;
          &lt;tr class="view_1"&gt;&lt;th&gt;Header 1&lt;/th&gt;&lt;/tr&gt;
          &lt;tr class="view_2"&gt;&lt;th&gt;Header 2&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="view_1"&gt;&lt;td&gt;View 1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr class="view_2"&gt;&lt;td&gt;View 2&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  
  &lt;/table&gt;
  
  &lt;button&gt;Click Me&lt;/button&gt;
  </code></pre>
  
  <p>The initial view has .view_1 hidden and .view_2 shown. However, there's a slight top border on the header. This border disappears when you hide .view_2 and show .view_1. How do I hide that top border when .view_2 is shown?</p>
  
  <p>Thanks! </p>