how to set same width to column of thead and tbody of table which generate dynamically
<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>