kristen
Reputation: 488
How can I have 2 fixed headers on 1 page?
I have a page with a fixed header and below that a table that I'd like to have a fixed table header so when I scroll I always see the page header and then the table header below that. When I try to fix the thead this screws up the column alignment of thead. How do I correct this?
EDIT: My question is how do I get the column headers to line up with the columns?
EDIT: Also note that I need TWO headers...one at the top of the page and another for the table.
<!DOCTYPE HTML>
<html>
<head>
<style>
#top1{
border-bottom:black;
background: #dedede;
position:fixed;
top:0;
left:0;
width:50%;
color: #000;
height: 30px;
}
#table{
width: 50%;
margin-top: 28px;
}
#table_header{
width: 100%;
position: fixed;
}
.col1{
width: 40%;
border: 1px solid #000;
}
.col2{
width: 20%;
border: 1px solid #000;
}
.col3{
width: 25%;
border: 1px solid #000;
}
.col4{
width: 15%;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="top1">
blah blah blah
</div>
<div id="top2">
<table id="table">
<thead id="table_header">
<tr>
<th class="col1">column 1</th>
<th class="col2">column 2</th>
<th class="col3">column 3</th>
<th class="col4">column 4</th>
</tr>
</thead>
<tbody>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
<tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Upvotes: 5
Views: 5285
Answers (10)
magicalex
Reputation: 937
I've come up with a CSS only solution which works (at least on chrome). You can see it here at jsfiddle. The HTML:
<div id="header">this seems to work</div>
<table border="1">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some datum</td>
<td>Some other datum</td>
<td>yet another datum</td>
<td>the final bit of data</td>
</tr>
<!--etc etc etc-->
<tr>
<td>Some datum</td>
<td>Some other datum</td>
<td>yet another datum</td>
<td>the final bit of data</td>
</tr>
</tbody>
</table>
The CSS:
* {
padding: 0;
margin: 0;
}
#header {
position: fixed;
height: 20px;
background: blue;
width: 80%;
border: 1px solid black;
z-index: 9;
}
table {
}
thead {
background: blue;
position: fixed;
top: 20px;
width: 80%;
z-index: 10;
}
tbody {
background: yellow;
position: absolute;
top: 40px;
width: 80%;
z-index: 0;
}
thead tr {
background: red;
width: 100%;
display:block;
}
thead tr th:last-child {
}
thead tr {
}
tr {
width: 100%;
display: block;
}
td,th {
display: inline-block;
width: 20%;
}
th {
height: 20px;
margin-right: -4px;
}
td {
display: inline-block;
height: 50px;
margin-right: -4px;
}
tr th:first-of-type,
tr td:first-of-type {
width: 29%;
}
tr th:last-of-type,
tr td:last-of-type {
width: 29%;
}
Could probably benefit from some tightening up, but it seems to fulfill the OP's criteria.
Upvotes: 0
Anagio
Reputation: 3075
Another option is to use datatables.net's fixed header plugin this will fix the table header so you can scroll down and always see the tables th headers, then use a fixed div tag above the table like I posted earlier http://datatables.net/extras/fixedheader/
Upvotes: 0
Luca Borrione
Reputation: 17012
If I caught you right .. I made a demo for you http://jsfiddle.net/aV54L/
No jQuery, no JavaScript .. CSS only
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin : 0px;
}
#top1{
border-bottom:black;
background: #dedede;
position:fixed;
top:0;
left:0;
width:50%;
color: #000;
height: 30px;
z-index:5;
}
.col1{
width: 40%;
border: 1px solid #000;
}
.col2{
width: 20%;
border: 1px solid #000;
}
.col3{
width: 25%;
border: 1px solid #000;
}
.col4{
width: 15%;
border: 1px solid #000;
}
#tableHeader {
width: 50%;
top: 20px;
position:fixed;
background-color: red;
z-index:10;
}
#table {
position: relative;
width: 50%;
top: 50px;
background-color: aqua;
z-index:0;
}
</style>
</head>
<body>
<div id="top1">
blah blah blah
</div>
<div id="top2">
<table id="tableHeader" border="0" cellpadding="5" cellspacing="0">
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
</table>
<table id="table" border="0" cellpadding="5" cellspacing="0">
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
<tr>
<td class="col1">column 1</th>
<td class="col2">column 2</th>
<td class="col3">column 3</th>
<td class="col4">column 4</th>
</tr>
</table>
</div>
</body>
</html>
As I say in the comment, I think that the problem with your code is to give position:fixed to thead tag. If it's not needed I suggest to use two tables as shown in the demo to let positioning to be understood correctly.
I think this is not a hack as been said but it's accepting things like they work. I tried to change the original code as less as possible however.
Upvotes: 9
ShankarSangoli
Reputation: 69915
In order to achieve what you are looking for, just Css is not going to help. You need to take help of JavaScript/jQuery.
If you want to have a fixed header for a table then you cannot have its width 100% because if you resize the window or the container which holds the table, it is going to resize the table content but the header will not resize automatically. You have to explicitly set the header column width.
I have a jQuery solution with few lines of code and cleaned and removed most of the unwanted css. Take a look at the demo which I have created and let me know how it helps you.
Note: For the demo I have set table
widthas600px. You can set it as per your requirement.
Final Css
#top1{
border-bottom:black;
background: #dedede;
position:fixed;
top:0;
left:0;
width:600px;
color: #000;
height: 30px;
}
#table{ width:600px;margin-top: 28px; }
#table thead{ background:white; }
.col1{ width: 40%; }
.col2{ width: 20%; }
.col3{ width: 25%; }
.col4{ width: 15%; }
.col1, .col2, .col3, .col4{ border: 1px solid #000; }
.fixedPosition{ position: fixed; }
Js
$(function(){
var $table = $("#table"), w,
$columns = $table.find('thead th')
$table.find('tr:eq(1) td').each(function(i){
w = $columns.eq(i).width();
$(this).width(w);
$columns.eq(i).width(w);
})
$table.find('thead').addClass('fixedPosition');
});
Working Demo
(Note: Once the demo page loads please resize the fiddle output window it is very small to accommodate 600px width table and you might see column not aligning with the table and might think this does not solve the problem)
Upvotes: 1
danijar
Reputation: 34215
This is very easy. You can effect a lot with the display-property.
In this case we style the tbody to flow with the text (and the thead). Then we can add margin as distance to the top of the surrounding div. (padding also works but is logical wrong.)
tbody{
display:inline-block;
margin-top:30px;
}
Additionally you should fill your thead white.
thead{
background:#ffffff;
}
Ask if you have any questions!
edit: I want to mention that this is a pure css solution. You used position:fixed so I think it is ok for you. Notice that this property don't work on mobile devices (understand as position:absolute) and Internet Explorer 6 (ignores it).
Upvotes: 0
Rubytastic
Reputation: 15501
I would suggest using a CSS framework for this such as Blueprint, that way you get a rock solid all-browser compatible alignment of your divs.
- Follow simple instructions on http://blueprintcss.org/ on how to add blueprint to your project
- http://blueprintcss.org/tests/parts/grid.html see this page creating 2 24 grids below each other would give you 2 fixed headers.
All other above suggestions are hard work in css hacking and they could be not compatible across all browsers, therefore blueprint is one of the best tools you can add, its a short learn curve with high revenue in debugging issue
Upvotes: 0
visited
Reputation: 3
Change the margin-top for #table, and a negative margin-top for #table_header (in this example 100px)
#table{
width: 50%;
margin-top: 128px;
}
#table_header{
width: 100%;
position: fixed;
margin-top: -100px;
}
Upvotes: 0
dkulkarni
Reputation: 2830
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
<!--
#top1 {
border-bottom: black;
background: #dedede;
overflow: auto;
top: 0;
left: 0;
width: 756px;
color: #000;
height: 30px;
}
/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 756px
}
/* Reset overflow value to hidden for all non-IE browsers.*/
html>body div.tableContainer {
overflow: hidden;
width: 756px
}
/* define width of table. IE browsers only */
div.tableContainer table {
float: left;
width: 740px
}
/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers. */
html>body div.tableContainer table {
width: 756px
}
/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative
}
/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
display: block
}
/* make the TH elements pretty */
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
}
/* make the A elements pretty. makes for nice clickable headers */
thead.fixedHeader a,thead.fixedHeader a:link,thead.fixedHeader a:visited
{
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}
/* make the A elements pretty. makes for nice clickable headers */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}
/* define the table content to be scrollable */
/* set TBODY element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto */
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td,tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body thead.fixedHeader th {
width: 200px
}
html>body thead.fixedHeader th+th {
width: 240px
}
html>body thead.fixedHeader th+th+th {
width: 316px
}
/* define width of TD elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body tbody.scrollContent td {
width: 200px
}
html>body tbody.scrollContent td+td {
width: 240px
}
html>body tbody.scrollContent td+td+td {
width: 300px
}
-->
</style>
</style>
</head>
<body>
<div id="top1">blah blah blah</div>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%"
class="scrollTable">
<thead class="fixedHeader">
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
<tr>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
<td>fjasklfjsdklfjsdlk</td>
</tr>
</tbody>
</table>
</div>
</body>
Reference: http://www.imaputz.com/cssStuff/bigFourVersion.html
Upvotes: 0
sidneydobber
Reputation: 2910
#top1{
border-bottom:black;
background: #dedede;
position:fixed;
top:0;
left:0;
width:50%;
color: #000;
height: 30px;
}
#table{
width: 50%;
margin-top: 28px;
}
#table_header{
margin-left: -8px;
width: 100%;
position: fixed;
}
.col1{
border: 1px solid #000;
}
.col2{
border: 1px solid #000;
}
.col3{
border: 1px solid #000;
}
.col4{
border: 1px solid #000;
}
thead tr {
width: 50%;
display: table;
}
Upvotes: 1
CD Jorgensen
Reputation: 1391
One option is to add these two attributes to your #tableheader style:
top: 36px;
background-color:white;
That tells your header what its fixed position should actually be, and prevents the background from being transparent. Notice, however, that the column widths don't line up with the body, and you can see them around the outer edge of the header.
To get around that, you will likely need to play around with the margin and padding of your header. You'll also need to give each header column the same width as its corresponding body column.
Upvotes: 0
Related Questions
- Sticky fixed header with different contents
- position fixed header in html
- Prevent fixed header to overlapp content
- Can someone help me with a CSS/jQuery fixed header with dynamic elements?
- Content issue when add an fixed header with jQuery
- fixed header with responsive design
- Fixed Header only on one page
- Fixed header that snaps underneath main fixed header
- Having 2 sticky headers, one that switches, one that doesn't
- CSS/Jquery Fixed Header + Change