title: how to set same width to column of thead and tbody of table which generate dynamically
body: <p>I am trying to set same width to column of tbody and thead.
  I need <code>tbody</code> scrollable, <code>thead</code> freeze and Number of columns are not fixed...! I google a lot for same....
  Some code snippets i have tried.... </p>
  
  <p><strong>First e.g</strong>
   For <code>thead</code> and <code>tbody</code> I have set separate <code>div</code> and <code>table</code>. 
   Here i have set thead <code>style="display:block;"</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="border:solid;border-color:red;" &gt;
   &lt;div style="border:solid;"&gt;
    &lt;table border="1" width="100%"&gt;
          &lt;thead style="background-color:red;display:block"&gt;
                  &lt;tr&gt;
                          &lt;th style="width:40%"&gt;&lt;span&gt;Fruits&lt;/span&gt;&lt;/th&gt;
                          &lt;th style="width:40%"&gt;&lt;span&gt;Vitamin A&lt;/span&gt;&lt;/th&gt;
                          &lt;th style="width:40%"&gt;&lt;span&gt;Vitamin C&lt;/span&gt;&lt;/th&gt;
                  &lt;/tr&gt;
          &lt;/thead&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;div style="height:80px; overflow:auto;border:solid;border-color:yellow;"&gt;
  &lt;table border="1" width="100%"&gt;
  
          &lt;tbody&gt;
                  &lt;tr&gt;
                          &lt;th&gt;Oranges&lt;/th&gt;
                          &lt;td&gt;295 ui&lt;/td&gt;
                          &lt;td&gt;69.7 mg&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                          &lt;th&gt;Bananas&lt;/th&gt;
                          &lt;td&gt;76 ui&lt;/td&gt;
                          &lt;td&gt;10.3 mg&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                          &lt;th&gt;Apples&lt;/th&gt;
                          &lt;td&gt;98 ui&lt;/td&gt;
                          &lt;td&gt;8.4 mg&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                          &lt;th&gt;Oranges&lt;/th&gt;
                          &lt;td&gt;295 ui&lt;/td&gt;
                          &lt;td&gt;69.7 mg&lt;/td&gt;
                  &lt;/tr&gt;
          &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Second e.g</strong> 
    Here I set same <code>div</code> and <code>table</code> for <code>thead</code> and <code>tbody</code> keeping <code>thead</code> <code>position:fixed</code> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>     &lt;div style="border:solid;overflow:scroll;height:80px"&gt;
        &lt;table border="1" width="100%"&gt;
              &lt;thead style="background-color:red;position:fixed;"&gt;
                      &lt;tr&gt;
                              &lt;th&gt;Fruits&lt;/th&gt;
                              &lt;th&gt;Vitamin A&lt;/th&gt;
                              &lt;th&gt;Vitamin C&lt;/th&gt;
                      &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                      &lt;tr&gt;
                              &lt;th&gt;Apples&lt;/th&gt;
                              &lt;td&gt;98 ui&lt;/td&gt;
                              &lt;td&gt;8.4 mg&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                              &lt;th&gt;Oranges&lt;/th&gt;
                              &lt;td&gt;295 ui&lt;/td&gt;
                              &lt;td&gt;69.7 mg&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                              &lt;th&gt;Oranges&lt;/th&gt;
                              &lt;td&gt;295 ui&lt;/td&gt;
                              &lt;td&gt;69.7 mg&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                              &lt;th&gt;Bananas&lt;/th&gt;
                              &lt;td&gt;76 ui&lt;/td&gt;
                              &lt;td&gt;10.3 mg&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                              &lt;th&gt;Apples&lt;/th&gt;
                              &lt;td&gt;98 ui&lt;/td&gt;
                              &lt;td&gt;8.4 mg&lt;/td&gt;
                      &lt;/tr&gt;
      
              &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anyone faced same issue...?</p>
  
  <p>Thanks.</p>