title: How to align TH Header with TD in TBody
body: <p>I'm having problems trying to embed a table in an existing HTML page with some CSS.</p>
  
  <p>This CSS is hiding the header of the table by default with a style definition like:</p>
  
  <pre><code>.tablestuff thead {
       display: none;
  }
  </code></pre>
  
  <p>But I want the table to show, so I tried setting the style on the thead element with "display:block" (with javascript).  That makes the header display, but the columns of the header don't line up with the td columns.</p>
  
  <p>I have reduced my HTML to the following (hopefully with minimal typos) and showing the style on the thead element as set by javascript.</p>
  
  <pre><code>&lt;div class="tablestuff"&gt;
  &lt;table border="1"&gt;
  &lt;thead style="display:block"&gt;
  &lt;tr&gt;
  &lt;th id="th1" style="width: 20px"&gt;&lt;/th&gt;
  &lt;th id="th2" style="width: 20px"&gt;&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td headers="th1" style="width: 20px"&gt;&lt;/td&gt;
  &lt;td headers="th2" style="width: 20px"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I make both the header show and also align correctly with the td columns?  </p>