как прокрутить таблицу и зафиксировать голову сверху

---

я создаю таблицу и фиксирую голову и тело, но я не могу прокрутить ее с помощью этого css :

.t1 tbody {
          height: 100px;
          overflow: auto;
      }

      .t1 thead > tr, tbody {
          display: block;
      }

поэтому я нахожу эту ссылку : http://jsbin.com/bipusabici/edit?html,выход
это отличная работа, но моя проблема заключается в том, что структура таблицы отличается от обычной таблицы с thead и tbody.
это использование этой структуры :

<div id="tHeadContainer">
          <table  >
              <tr>
                  <td>Name</td>
                  <td>Operator</td>
                  <td>Began operation</td>
                  <td>Tonnage</td>
                  <td>Status</td>
              </tr>
          </table>
      </div><!-- tHeadContainer -->

<div id="tBodyContainer">
           <table  >
               <tr>
                   <td>Seabaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaourne Sun</td>
                   <td>Seabourn Cruise Line</td>
                    ....

это объявляет голову как отдельную таблицу и тело как отдельную таблицу тоже с его собственным div

но в обычном способе построения таблицы, как показано ниже, это использование thead и tbody, а не отдельной таблицы . посмотреть его :

 <table>
  <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
      <td>Sum</td>
      <td>$180</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
  </tr>
  <tr>
      <td>February</td>
      <td>$80</td>
  </tr>
  </tbody>
</table> 

это моя скрипка, и я хочу прокрутить ее с этой нормальной структурой таблицы: http://jsfiddle.net/snicee/46jzhs94/3/

---