keep table headers still when scrolling a table? - html

Question

I have the following table which inside a model dialog and I have applied some css to, so that the head stays in the same position when its being scrolled.
however after I load the page the columns are pushed to the left, these 5 columns should appear under the headers.
also the underlying page has been pushed to the left of the page also.
<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

Check if this solves your problem: 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

So I changed your CSS and just used generic selectors for ease of making an example.
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;
}
I assigned set widths and set the thead position to fixed.
Here is the working fiddle.
Updated fiddle to prevent header from floating when parent DOM scrolls.
http://jsfiddle.net/wuwdY/7/