Я хочу создать таблицу с фиксированнойthead а такжеtfoot и прокручиваемыйtbody!

Я пробовал несколько подходов, как CSS, так и CSS + Javascript, но все они слабые и ненадежные, и я легко могуперерыв их путем изменения разметки в демоверсии.

То, что я хочу, это способ иметь столвести себя как столэто означает, что браузеравтоматически настраивать столбцы на основе содержимого (как при загрузке страницы, так и в случае изменения размера окна) и в этих сценариях:

если содержимое заголовка столбца (thead > tr > th) больше, чем содержимое тела столбца (tbody > tr > td) и больше, чем содержимое нижнего колонтитула столбца (tfoot > tr > td) размер столбца должен изменяться в зависимости от размера заголовка столбца

если содержимое тела столбца (tbody > tr > td) больше, чем содержимое заголовка столбца (thead > tr > th) и больше, чем содержимое нижнего колонтитула столбца (tfoot > tr > td) размер столбца должен изменяться в зависимости от размера тела столбца

если содержимое нижнего колонтитула столбца (tfoot > tr > td) больше, чем содержимое заголовка столбца (thead > tr > th) и больше, чем содержимое тела столбца (tbody > tr > td) размер столбца должен изменяться в зависимости от размера нижнего колонтитула

table Ниже следует уточнить сценарии:

<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>

Мне нужно чистое (насколько это возможно) и надежное решение, которое будет работать для различных сценариев, возможно, только CSS, но также и JavaScript в порядке (ванильный и чистый JavaScript, а не плагины jQuery). Меня не волнует поддержка старого браузера (было бы замечательно иметь его или, по крайней мере, найти решение, которое может изящно ухудшиться в старом браузере, но это необязательно) ... Я даже могу согласиться использоватьdivs вместо узлов таблицы, если окончательное решение работает так, как ожидалось ... так что в 2016 году с современным браузером и CSS это как-то возможно ?!

РЕДАКТИРОВАТЬ:

Тело должно прокручиваться вертикально, и в таблице может быть любое количество столбцов.

ОБНОВИТЬ:

Я придумал это решение:https://codepen.io/daveoncode/pen/LNomBE но я все еще не удовлетворен на 100%. Основная проблема заключается в том, что я не могу установить разные фоны для ячеек верхнего и нижнего колонтитула.

ОБНОВЛЕНИЕ 2:

это работает, ау!