滚动表时仍然保持表头？

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/