HTML table with fixed header and footer and scrollable body without fixed widths
<p>I want to to create a table with fixed <code>thead</code> and <code>tfoot</code> and a scrollable <code>tbody</code>!</p>

<p>I've tried several approaches, both CSS only and CSS + Javascript, but they are all weak and unreliable and I can easily <em>break</em> them by changing the markup in the demo.</p>

<p>What I want is a way to have the table to <strong>behave like a table</strong>, this means that the browser will <strong>automatically adjust columns</strong> based on the content (both at page load that in case of window resize) and that in these scenarios:</p>

<ol>
<li><p>if the content of the column's header (<code>thead &gt; tr &gt; th</code>) is larger than the content of the column's body (<code>tbody &gt; tr &gt; td</code>) and larger than the content of the column's footer (<code>tfoot &gt; tr &gt; td</code>) the column should resize based on the size of the column's header</p></li>
<li><p>if the content of the column's body (<code>tbody &gt; tr &gt; td</code>) is larger than the content of the column's header (<code>thead &gt; tr &gt; th</code>) and larger than the content of the column's footer (<code>tfoot &gt; tr &gt; td</code>) the column should resize based on the size of the column's body</p></li>
<li><p>if the content of the column's footer (<code>tfoot &gt; tr &gt; td</code>) is larger than the content of the column's header (<code>thead &gt; tr &gt; th</code>) and larger than the content of the column's body (<code>tbody &gt; tr &gt; td</code>) the column should resize based on the size of the column's footer</p></li>
</ol>

<p>The <code>table</code> below should clarify the scenarios:</p>

<pre><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Header one *leads the width* (case 1)&lt;/th&gt;
      &lt;th&gt;Header two&lt;/th&gt;
      &lt;th&gt;Header three&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Column one&lt;/td&gt;
      &lt;td&gt;Column two *leads the width* (case 2)&lt;/td&gt;
      &lt;td&gt;Column three&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;td&gt;Footer one&lt;/td&gt;
      &lt;td&gt;Footer two&lt;/td&gt;
      &lt;td&gt;Footer three *leads the width* (case 3)&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
&lt;/table&gt;
</code></pre>

<p>I want a clean (as possible) and reliable solution that will work for the different scenarios, possibly CSS only but also JavaScript is OK (vanilla and clean JavaScript, not jQuery plugins).
I don't care about old browser support (it would be great to have it or at least to reach a solution which can degrade gracefully on old browser but it's optional)... I can even accept to use <code>div</code>s instead of table nodes if the final solution works as expected... so in 2016, with modern browser and CSS is this possible somehow?!</p>

<p><strong>EDIT:</strong></p>

<p>The body should scroll vertically and the table may have any number of columns</p>

<p><strong>UPDATE:</strong></p>

<p>I came up with this solution: <a href="https://codepen.io/daveoncode/pen/LNomBE" rel="noreferrer">https://codepen.io/daveoncode/pen/LNomBE</a>
but I'm still not 100% satisfied. The main issue is that I can't set different backgrounds for header and footer cells.</p>

<p><strong>UPDATE 2:</strong></p>

<p>it works now!</p>