我有一个带有固定标题的页面，下面是一个表格，我希望有一个固定的表格标题，所以当我滚动时，我总是看到页面标题，然后是下面的表格标题。当我试图修复thead时，这会拧紧thead的列对齐方式。我该如何纠正？
编辑：我的问题是如何让列标题与列对齐？
编辑：还要注意我需要两个标题...一个在页面顶部，另一个用于表格。
<!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>
答案 0 :(得分：9)
如果我抓到你了..我为你http://jsfiddle.net/aV54L/做了演示 没有jQuery，没有JavaScript ..仅限CSS
以下是代码：
<!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>
正如我在评论中所说，我认为您的代码的问题是将position:fixed提供给thead标记。如果不需要，我建议使用演示中显示的两个表格来正确理解positioning。
我认为这不是正如所说的那样的黑客，但它接受像他们工作的东西。我尝试尽可能少地更改原始代码。
答案 1 :(得分：1)
#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;
}
答案 2 :(得分：1)
为了达到你想要的目的，只有Css无济于事。您需要获得JavaScript/jQuery的帮助。
如果你想为一个表有一个固定的标题，你就不能拥有它的width 100%，因为如果你调整窗口或容纳表的容器的大小，它将调整表的大小内容但标题不会自动调整大小。您必须明确设置标题列宽度。
我有一个jQuery解决方案，几行代码，清理并删除了大部分不需要的css。看一下我创建的演示，让我知道它对你有什么帮助。
注意：对于演示，我将表
width设置为600px。你可以设置它 根据您的要求。
最终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');
});
正在使用 Demo
（注意：一旦加载了演示页面，请调整小提琴输出窗口的大小，它非常小，可以容纳600px宽度的表格，你可能会看到列没有与表格对齐，可能认为这不是解决问题）
答案 3 :(得分：0)
一个选项是将这两个属性添加到#tableheader样式：
top: 36px;
background-color:white;
告诉你的标题它的固定位置应该是什么，并防止背景透明。但请注意，列宽不与正文对齐，您可以在标题的外边缘看到它们。
要解决这个问题，您可能需要使用标题的边距和填充。您还需要为每个标题列提供与其对应的主体列相同的宽度。
答案 4 :(得分：0)
<!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>
答案 5 :(得分：0)
为#table更改margin-top，为#table_header更改margin-top（在此示例中为100px）
#table{
width: 50%;
margin-top: 128px;
}
#table_header{
width: 100%;
position: fixed;
margin-top: -100px;
}
答案 6 :(得分：0)
我建议使用一个CSS框架，例如Blueprint，这样你就可以获得与浏览器兼容的全部浏览器。
以上所有其他建议都是css hacking的难点，它们可能在所有浏览器中都不兼容，因此蓝图是您可以添加的最佳工具之一，它是一个简短的学习曲线，在调试问题上收入高
答案 7 :(得分：0)
这很容易。您可以使用display - 属性生效很多。
在这种情况下，我们将tbody设置为与文本（和thead）一起流动。然后我们可以将margin作为距离添加到周围div的顶部。 （padding也有效但逻辑错误。）
tbody{
display:inline-block;
margin-top:30px;
}
此外，你应该填补你的白色。
thead{
background:#ffffff;
}
询问您是否有任何问题！
编辑：我想提一下这是一个纯粹的CSS解决方案。您使用了position:fixed，所以我认为您可以。请注意，此属性不适用于移动设备（理解为position:absolute）和Internet Explorer 6（忽略它）。
答案 8 :(得分：0)
另一种选择是使用datatables.net的固定标题插件，这将修复表头，这样你就可以向下滚动并始终看到表格的标题，然后像我之前发布的那样使用表格上方的固定div标签{{3} }
答案 9 :(得分：0)
我想出了一个仅适用于CSS的解决方案（至少在chrome上）。你可以看到它here at jsfiddle。 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>
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%;
}
可能会受益于一些收紧，但它似乎符合OP的标准。