title: table with fixed header at top
body: <p>I am trying to create a table w/ a fixed header at the top for data from our database. When I add 'position:fixed;' to the header's css it keeps it at the top but it forces the entire header to the first column. How can I get the table header to be at the top and be correctly aligned w/ the columns?  I'd prefer a css/html solution, if possible.</p>
  
  <p>EDIT: I've tried quite a few of the jQuery solutions that I've found on SO and through google. Some work, some don't. Those that do work on their own tend to break when I combine it with other scripts I have running on my pages...</p>
  
  <pre><code>&lt;style&gt;
    .dg_hdr_row{
    position: fixed;
    top:0;
    height: 25px;
    }
  
    .dg_col1{ width:60%; border: 1px solid #000; padding: 5px;}
    .dg_col2{ width:15%; border: 1px solid #000; padding: 5px;}
    .dg_col3{ width:10%; border: 1px solid #000; padding: 5px;}
    .dg_col4{ width:15%; border: 1px solid #000; padding: 5px;}
  
  &lt;/style&gt;
  
  &lt;table width="100%"&gt;
  
   &lt;thead width="100%" &gt;
    &lt;tr width="100%" class="dg_hdr_row" &gt;
     &lt;th width="60%"&gt;Column 1&lt;/th&gt;
     &lt;th width="15%"&gt;Column 2&lt;/th&gt;
     &lt;th width="10%"&gt;Column 3&lt;/th&gt;
     &lt;th width="15%"&gt;Column 4&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
  
      &lt;tbody&gt;
          &lt;tr class="dg_row"&gt;
              &lt;td class="dg_col1"&gt;&lt;/td&gt;
              &lt;td class="dg_col2"&gt;&lt;/td&gt;
              &lt;td class="dg_col3"&gt;&lt;/td&gt;
              &lt;td class="dg_col4"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="dg_row"&gt;
              &lt;td class="dg_col1"&gt;&lt;/td&gt;
              &lt;td class="dg_col2"&gt;&lt;/td&gt;
              &lt;td class="dg_col3"&gt;&lt;/td&gt;
              &lt;td class="dg_col4"&gt;&lt;/td&gt;
          &lt;/tr&gt;       
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>