固定表和 div 中的頁眉和頁腳？

Question

我有一個位於可滾動 div 窗口內的表格。 頁眉包含在一個 thead 標簽中，頁腳位於底部的單獨 tbody 中。 我需要將它們固定在屏幕上，同時保持它們的對齊/方向。

我試過了

position:absolute

這扭曲了一切。

請參閱以下小提琴： http : //jsfiddle.net/jkgt3wdm/

我願意接受所有建議。

編輯：還需要能夠向左和向右滾動。

Answer 1

確保您的頁腳位於<tfoot> ，您可以使用以下命令修復它以及頁面頂部和底部的頁眉：

   position:fixed;

然后將標題定位在：

   top:0;

和頁腳：

   bottom:0;

像這樣：

thead, tfoot {position:fixed;background-color:#000; color:#fff;}
thead {top:0; }
tfoot {bottom:0;}

您仍然需要配置<tbody>單元格的寬度，但這應該會給您粘性頁眉和頁腳。

這是你在找什么： http : //jsfiddle.net/jkgt3wdm/6/

Answer 2

老實說，解決這個問題的最簡單方法是使用已經構建的東西。 擺弄桌子並不總是那么容易，如果有人已經找到了一種萬無一失的方法，為什么不使用它:)

我建議使用這個： https : //github.com/jmosbech/StickyTableHeaders

Answer 3

將此作為快速解決方案進行檢查：

.header{
  width:100%;
  height:20px;
  background-color:blue;
}
.footer{
  width:100%;
  height:20px;
  background-color:green;
}
.content{

  overflow-y:auto;
}

http://jsfiddle.net/jkgt3wdm/7/