滾動表時仍然保持表頭？

Question

我有下面的表格，裏面有一個模型對話框，我已經應用了一些CSS，以便頭部在滾動時保持在相同的位置。

但是在我加載頁面後，列被推到左邊，這5列應該出現在標題下。

此外，底層頁面也被推送到頁面的左側。

   <style> 
        .tblSearchMedia1 tbody { 
        height: 100px; 
        overflow: auto; 
         } 
        .tblSearchMedia1 td { 
        padding: 3px 10px; 
        } 

        .tblSearchMedia1 thead > tr, tbody{ 
        display:block; 

        } 
       </style> 


       <table class="tblSearchMedia1"> 
       <thead> 
        <tr> 
         <th> Region </th> 
         <th> Subregion </th> 
         <th> Country </th> 
         <th> Media Type </th> 
         <th> Media Name </th> 
        </tr> 
       </thead> 
       <tbody data-bind="foreach: MediaGroups"> 
        <tr> 
         <td data-bind="text: ID"></td> 
         <td data-bind="text: ID"></td> 
         <td data-bind="text:ID"></td> 
         <td data-bind="text: ID"></td> 
         <td data-bind="text: ID"></td> 
        </tr> 
       </tbody> 
      </table> 

Link to Larger image

Answer 1

檢查問題得以解決：http://jsfiddle.net/javitube/DLjLn/1/

.tblSearchMedia1 
    { 
     width:500px; 
    } 
    .tblSearchMedia1 tbody { 
     height: 50px; 
     overflow:auto; 
     display:block; 
     width:100%; 
    } 

    .tblSearchMedia1 thead th, .tblSearchMedia1 tbody td 
    { 
     width: 100px; 
    } 
    .tblSearchMedia1 td { 
     padding: 3px 10px; 
    } 
    .tblSearchMedia1 thead > tr { 
     position:relative; 
     display:block; 
    } 

Answer 2

所以我改變了你的CSS，只是使用的通用選擇，便於製作的例子。

body { 
    margin: 0; 
    padding: 0; 
} 
table { 
    border-collapse:collapse; 
} 
th, td { 
    border:1px solid black; 
} 
.tblSearchMedia1 thead { 
    position: absolute; 
    width: 525px; 
} 
.tblSearchMedia1 tbody { 
    width: 525px; 
    height: 100px; 
    overflow: auto; 
} 
.tblSearchMedia1 th { 
    background: #000000; 
    color: #ffffff; 
} 
.tblSearchMedia1 tbody { 
    position:absolute; 
    top: 50px; 
} 
.tblSearchMedia1 th, td { 
    width: 75px; 
    padding: 3px 10px; 
    text-align: center; 
} 

我分配了設置的寬度並將thead位置設置爲固定。

這是工作小提琴。

更新的小提琴，以防止父級DOM滾動時標題浮動。

http://jsfiddle.net/wuwdY/7/