粘表頭與100％的高度「窗格」

Question

背景： 我使用CSS創建一個Web應用程序的體驗，在網頁上的一切總是可見的，只是在某些panes是滾動的。我現在需要將其擴展到表格。我希望表頭始終保持可見（有時是頁腳），但表格主體只能滾動。

我到目前爲止所做的工作是對thead和tfoot應用「窗格」類，然後使tbody自動填充高度，然後使其滾動。所有這些工作除了thead，tbody和tfoot不再是100％寬度。這種方法似乎讓我離我想要的最近。

小提琴： 我有一個的jsfiddle這讓我接近，這也顯示出我使用創建的固定和滾動panes代碼。 http://jsfiddle.net/va4HF/1/

要求：理想我想保持我的pane CSS，因爲它是，但與之相適應需要一個表時。我也想只保留這個CSS。

以下代碼是我的概念證明代碼，並且還包含面板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);} 

研究： 別人已經在Table that Fills 100% Parent Height with Fixed Header/Footer問到這個類似的情況，但一直沒有得到很好的響應，並結束隨着Javascript，但我想嘗試找到一個CSS解決方案。或者至少是一個簡單的JavaScript解決方案，他用那什麼（避免疊加三個表）

Answer 1

大量的研究後找出所有的我爲此選擇了選擇使用separ吃了標題，正文和頁腳的表格，並用div隔開每個表格。然後我將該div設置爲「窗格」。只要標題表和主體表中的列被設置爲相同的寬度，它們就會排隊。

有一些我不得不做的清理，其中一個導致需要保持垂直滾動條總是顯示，然後在頁眉和頁腳表中添加一個頁邊距，這樣如果主體開始滾動或不滾動，標題將始終排隊。

這將是這樣的：

<div class="pane table-head"> 
     <table> 
      <thead class=""> 
       <tr> 
        <th>Header</th> 
       </tr> 
      </thead> 
     </table> 
    </div> 
    <div class="pane table-body fill"> 
     <table> 
      <tbody> 
       <tr><td>Text</td></tr> 
       <tr><td>Text</td></tr> 
       ... 
      </tbody> 
     </table> 
    </div> 
    <div class="pane table-foot"> 
     <table> 
      <tfoot> 
       <tr> 
        <th>Footer</th> 
       </tr> 
      </tfoot> 
     </table> 
    </div> 

查看更新的jsfiddle：http://jsfiddle.net/bluecaret/va4HF/5/

這仍然不是一個理想的解決方案，我可能最終會拋棄這一點，並用一個div的法比奧的解決方案去雖然我可以根據一些測試看到潛在的問題。現在這就是我會堅持的。

Answer 2

好，第一個問題是，你爲什麼要使用表所有，但以防萬一使用這樣的：

table, th{width:100% !important; min-width:240px; } 

其中最小寬度是表

然後最小寬度再次，你真的應該使用的div：少，更容易標記都沒有問題，像這樣的