只有css - 固定表頭溢出

Question

我想建立一個表格，如果內容大於容器，可以在x和y方向滾動。我也希望標題始終在頂部可見。我已經完成了第一部分工作，並且標題始終在頂部可見，但標題列大小與表格大小不匹配。

我創造了這個小提琴：

http://jsfiddle.net/xxQQS/1/

我一個CSS唯一的解決辦法了。

編輯：似乎有一些人似乎認爲這不能只用CSS來完成。這可能是真的，但是請不要只是發帖說'不能這樣做'。如果你能解釋爲什麼沒有CSS就無法完成，我會接受你的答案。

Answer 1

創建表格的克隆。對於第一個表格，使用visibility: hidden隱藏除標題外的所有行。使用visibility: hidden隱藏另一個表的標題。將你的表格放置在具有溢出屬性的div中，設置如下：

<div style="overflow-x: hidden; width: 400px;"> 
    <div style="overflow-y: hidden; height: 20px;"> 
     <table id="head-only"> 
     </table> 
    </div> 
    <div style="overflow-y: scroll; height: 100px;"> 
     <table id="body-only"> 
     </table> 
    </div> 
</div> 

Answer 2

可能是這個，你必須使用JS。選中此項http://www.tablefixedheader.com/