您好，我正在尝试为较长的数据实现表固定标头，主要需要在IE上以固定标头在整页中滚动。以下是我用静态文件复制的代码
#results tbody {
height: 300px;
overflow: auto;
overflow-x: hidden;
display: block;
width: 100%;
}
我能够在固定的标题上方滚动 css ，但是对齐方式不适用于放大和缩小，如果我在上方的css中将高度保持为100％，则无法实现固定标头
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var startIndex = 0;
var endIndex = 50;
function testTable() {
var value=100;
var testTable1 = document.getElementById('results');
// update total records indicator
document.getElementById('totalRecords').innerHTML = value;
if(endIndex === 'all')
endIndex = value;
var i = 0;
for(i = startIndex; i < value && i < endIndex; i++) {
var result = value;
var tabBody=testTable1.tBodies[0];
var row=document.createElement("tr");
cell0 = document.createElement("td");
cell0.setAttribute("id", "th1")
cell1 = document.createElement("td");
cell1.setAttribute("id", "th1")
cell2 = document.createElement("td");
cell2.setAttribute("id", "th1")
cell3 = document.createElement("td");
cell3.setAttribute("id", "th1")
cell4 = document.createElement("td");
cell4.setAttribute("id", "th1")
cell5 = document.createElement("td");
cell5.setAttribute("id", "th1")
cell6 = document.createElement("td");
cell6.setAttribute("id", "th1")
cell7 = document.createElement("td");
cell7.setAttribute("id", "th1")
// create text nodes
textnode0=document.createTextNode("aaa");
textnode1=document.createTextNode("bbb");
textnode2=document.createTextNode("cccc");
textnode3=document.createTextNode("ddd");
textnode4=document.createTextNode("eee");
textnode5=document.createTextNode("fff");
textnode6=document.createTextNode("ggg");
textnode7=document.createTextNode("hhh");
// append to cell
cell0.appendChild(textnode0);
cell1.appendChild(textnode1);
cell2.appendChild(textnode2);
cell3.appendChild(textnode3);
cell4.appendChild(textnode4);
cell5.appendChild(textnode5);
cell6.appendChild(textnode6);
cell7.appendChild(textnode7);
// append to row
row.appendChild(cell0);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
row.appendChild(cell7);
tabBody.appendChild(row)
}
}
</script>
<title>Manage SW Names</title>
<style type="text/css">
#results tr{
border: 1px solid #000;
}
#results {
table-layout:auto;
margin:auto;
margin-bottom: 20px !important
padding-left: 5px;
border-collapse: collapse;
width: 100%;
}
#results td {
text-align: left;
vertical-align: middle;
padding:5px 10px;
border:1px solid #000;
}
#results th {
text-align: left;
vertical-align: middle;
padding:5px 10px;
border:1px solid #000;
}
#results thead{
background:#f9f9f9;
display:table;
width:100%;
width:calc(99% - 18px);
}
#results tbody {
height:300px;
overflow:auto;
overflow-x:hidden;
display:block;
width:100%;
}
#results tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
#results #th1,#th2,#th3,#th4,#th5,#th6,#th7,#th8 { width:156px }
</style>
</head>
<body onload="testTable();">
<table cellspacing="2px" cellpadding="2px" width="100%" style="padding-left:20px; padding-top:10px;padding-right:20px;height:100% ;">
<td>
<fieldset style="padding:5px; border: 1px solid #000; ">
<legend><b>yyyy</b></legend>
<table cellspacing="2px" cellpadding="2px" width="100%" style="vertical-align: top;">
<tr>
<td>
yyyy
</td>
</tr>
<tr>
<td>
<input id="ddd" type="text" size="35">
<select id="ddd" style="width: 150px">
<option value="0"selected>aaaa</option>
<option value="1">bbb</option>
<option value="2">ccc</option>
<option value="3">ddd</option></select></td>
<td></td>
<td></td>
<td>
<select id="searchResultPhrasesDropdown" style="width: 400px">
<option value="phrase"selected> </option>
<!-- populate dropdown with phrases -->
</select>
</td>
</tr>
<tr>
<td>
<input type="button" onClick="searchForPhrases();" value="Find" id="findPhrasesButton" />
<td></td>
<td width="100px"></td>
<td>
<input type="button" value="Update" buttonAlign='center' id="findArticleRowsButton">
</td>
</tr>
</table>
</fieldset>
</td>
<tr>
<td style="align: left; vertical-align: top; width: 100%;">
<fieldset style="padding:5px; border: 1px solid #000;">
<legend><b>xxxxx</b></legend>
<div id="resultDiv" class="tablestuff4 results" style="min-height: 345px; overflow-y: auto; width: 100%;">
<table id="results" cellspacing="20px" cellpadding="2px" style="padding-left: 5px;padding-right: 6px; width:100%;">
<thead>
<tr>
<th id="th1">
<input type="text" maxlength="10" placeholder="Part No" id="partNoFilterInput" ></input>
</th>
<th id="th2">
<select id="sss" >
<option value="vvv"selected>< aaa ></option>
<option value="ccc">bbb</option>
<option value="ggg">ccc</option>
<option value="nnn">ddd</option>
</select>
</th>
<th id="th3">aaa</th>
<th id="th4">bbb</th>
<th id="th5">ccc</th>
<th id="th6">ddd</th>
<th id="th7">eee</th>
<th id="th8">fff</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</br></br>
<table cellspacing="2px" cellpadding="2px">
<tr>
<td></td>
<td>
<label>Page Size:</label>
</td>
<td><label>Page No:</label></td>
<td><label>Total:</label></td>
</tr>
<tr>
<td>
<input type="button" value="Previous" id="prevPageButton">
<input type="button" value="Next" id="nextPageButton">
<label id="resultIndex"></label>
</td>
<td>
<select id="pageSize" style="margin-left: 5px;width: 100%;">
<option value="10">10</option>
<option value="100">100</option>
<option value="all"selected>all</option>
</select>
</td>
<td style="text-align: center;" id="pageNo">1</td>
<td style="text-align: center;" id="totalRecords">1</td>
</tr>
</table>
</fieldset>
</td>
</table>
</body>
</html>
并根据显示器的大小尝试在IE中使用Pure CSS进行响应