Eu quero criar uma tabela com fixothead etfoot e um roláveltbody!

Eu tentei várias abordagens, apenas CSS e CSS + Javascript, mas todas são fracas e não confiáveis e posso facilmentepausa alterando a marcação na demonstração.

O que eu quero é uma maneira de ter a mesa parase comporta como uma mesa, isso significa que o navegador iráajustar automaticamente as colunas com base no conteúdo (tanto no carregamento da página que no caso de redimensionamento da janela) quanto nos seguintes cenários:

se o conteúdo do cabeçalho da coluna (thead > tr > th) é maior que o conteúdo do corpo da coluna (tbody > tr > td) e maior que o conteúdo do rodapé da coluna (tfoot > tr > td) a coluna deve ser redimensionada com base no tamanho do cabeçalho da coluna

se o conteúdo do corpo da coluna (tbody > tr > td) é maior que o conteúdo do cabeçalho da coluna (thead > tr > th) e maior que o conteúdo do rodapé da coluna (tfoot > tr > td) a coluna deve ser redimensionada com base no tamanho do corpo da coluna

se o conteúdo do rodapé da coluna (tfoot > tr > td) é maior que o conteúdo do cabeçalho da coluna (thead > tr > th) e maior que o conteúdo do corpo da coluna (tbody > tr > td) a coluna deve ser redimensionada com base no tamanho do rodapé da coluna

otable abaixo deve esclarecer os cenários:

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

Eu quero uma solução limpa (possível) e confiável que funcione para os diferentes cenários, possivelmente apenas CSS, mas também JavaScript é OK (JavaScript simples e limpo, não plugins jQuery). Eu não me importo com o suporte a navegadores antigos (seria ótimo tê-lo ou, pelo menos, chegar a uma solução que pode degradar normalmente no navegador antigo, mas é opcional) ... Posso até aceitar usardivs em vez de nós da tabela, se a solução final funcionar conforme o esperado ... então, em 2016, com navegador moderno e CSS, isso é possível de alguma maneira ?!

EDITAR:

O corpo deve rolar verticalmente e a tabela pode ter qualquer número de colunas

ATUALIZAR:

Eu vim com esta solução:https://codepen.io/daveoncode/pen/LNomBE mas ainda não estou 100% satisfeito. A questão principal é que não consigo definir planos de fundo diferentes para as células de cabeçalho e rodapé.

ATUALIZAÇÃO 2:

funciona agora!