Липкий заголовок стола со 100% -й высотой "панелей"

Справочная информация. Я использую CSS для создания веб-приложения, такого как опыт, где все на странице всегда видно, и только определенные panes прокручиваются. Теперь мне нужно расширить это на таблицы. Я хочу, чтобы заголовок таблицы всегда оставался видимым (а иногда и нижним колонтитулом), но тело таблицы должно прокручиваться только.

То, что я сделал до сих пор применяется класс "панель" к thead и tfoot, а затем сделал tbody автоматического заполнения высоты, а затем сделать его прокручивать. Все это работает, за исключением того, что thead, tbody и tfoot больше не на 100% ширины. Этот метод, кажется, приближает меня к тому, что я хочу.

Fiddle: У меня есть JSFiddle, который приближает меня, он также демонстрирует код, который я использую для создания фиксированных и прокручиваемых panes. http://jsfiddle.net/va4HF/1/

Требования: В идеале я хотел бы сохранить свой pane css таким, какой он есть, но приспособить его, когда таблица нужна. Я также хотел бы сохранить этот CSS только.

Следующий код - это мой код, удостоверяющий концепцию, и также включает в себя Pane CSS.

HTML:

<div class="column">
    <div class="pane top">Top</div>
    <div class="pane middle">
        <table>
            <thead class="pane table-head">
                <tr>
                    <th>Header</th>
                </tr>
            </thead>
            <tbody class="pane table-body fill">
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
            </tbody>
            <tfoot class="pane table-foot">
                <tr>
                    <th>Footer</th>
                </tr>
            </tfoot>
        </table>
    </div>
    <div class="pane bottom">Bottom</div>
</div>

CSS:

body, html {
    height:100%;
    margin:0;
    padding:0;
}
div {
    box-sizing:border-box;
    box-sizing:content-box\9; /* Fix for IE9 sizing */
    -moz-box-sizing:border-box; /* Fix for firefox sizing */
}
.column {
    position:absolute;
    width:100%;
    min-height:100%;
    height:auto;
    overflow:hidden;
}
.pane {
    position:absolute;
    width:100%;
    overflow:hidden;
}
.fill {
    height:auto;
    overflow:auto;
}
.top {
    background:pink;
    height: 20%;
    top:0;
}
.middle {
    background:red;
    top:20%;
    bottom:50px;
}
.table-head {
    height: 40px;
    top:0;
}
.table-body {
    top:40px;
    bottom:40px;
}
.table-foot {
    height: 40px;
    bottom:0;
}
.bottom {
    background:orange;
    height: 50px;
    bottom:0;
}
table thead tr, table tfoot tr {background:rgba(0,0,0,0.5);}
table tbody tr {background:rgba(0,0,0,0.3);}
table td, table th {padding:10px; color:#fff;}

/* Fix for Safari scrollbars (also styles Chrome scrollbars) */
    .fill::-webkit-scrollbar {-webkit-appearance: none;width: 10px;}
    .fill::-webkit-scrollbar-track {background-color: rgba(0,0,0, .3);border-radius: 0px;}
    .fill::-webkit-scrollbar-thumb {border-radius: 0px; background-color: rgba(255,255,255, .4);} 

Исследование: кто-то еще спросил об этом с аналогичной ситуацией в таблице, которая заполняет 100% родительскую высоту с фиксированным верхним/нижним колонтитулом, но так и не получила хорошего ответа и в итоге оказалась с Javascript, но я хотел бы попробовать найти решение CSS. Или, по крайней мере, более простое решение Javascript, чем то, что он использовал (не нужно накладывать три таблицы)