title: Delete table thead in css
body: <p>I use <code>Markdown/pagedown extra</code> in javascript that produces a table using:</p>
  
  <pre><code>col1|col2
  ---|---
  xxx|xxx
  xxx|xxx
  xxx|xxx
  
  Markdown.Extra.init(converter, {table_class: "mytable"});
  </code></pre>
  
  <p>this generates html:</p>
  
  <pre><code>&lt;table class='mytable'&gt;
  &lt;thead&gt;
  &lt;tr&gt;
    &lt;th&gt;col1&lt;/th&gt;
    &lt;th&gt;col2&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;&lt;tr&gt;
    &lt;td&gt;xxx&lt;/td&gt;
    &lt;td&gt;xxx&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;xxx&lt;/td&gt;
    &lt;td&gt;xxx&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;xxx&lt;/td&gt;
    &lt;td&gt;xxx&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;  
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/zMP1F.png" alt="enter image description here"></p>
  
  <p>I want to hide/delete the <code>thead</code> and only show the rows.<br>
  When using:</p>
  
  <pre><code>.mytable thead th {
    visibility: hidden;
  }
  </code></pre>
  
  <p>it looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/N74oR.png" alt="enter image description here"></p>
  
  <p>Using jquery I can remove the <code>thead</code> for all tables on a certain page:</p>
  
  <pre><code>for (i=0; i &lt; $('table').length; i++) { 
    $('table')[i].deleteTHead(); 
  }
  </code></pre>
  
  <p>But I see a slight flicker and see the header being deleted.</p>
  
  <p><img src="https://i.stack.imgur.com/5IEv5.png" alt="enter image description here"></p>
  
  <p>Question:
  Is there another way? Can this be done using CSS to remove/hide the header completely?</p>