我正在使用这种设置实现一个带有固定标题的表:
<div style="padding-right:18px"><!-- to account for the scrollbar on the other div -->
<table id="head">
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</table>
</div>
<div style="height:400px; overflow-y:scroll">
<table id="body">
<tr>
<td>Val 1a</td>
<td>Val 2a</td>
</tr>
<tr>
<td>Val 1b</td>
<td>Val 2b - this cell is wide</td>
</tr>
</table>
</div>
我正在使用dojo,因此在页面加载后使列宽相同:
dojo.addOnLoad(function(){
var $bodyRow = dojo.query('#body tr')[0];
var $headRow = dojo.query('#head tr')[0];
dojo.forEach($bodyRow.cells, function(item, index){
var w = item.offsetWidth;
dojo.style($headRow.cells[index], 'width', w + "px");
});
});
不幸的是,尽管宽度正在调整,但它们的调整不足以对齐。任何人都知道为什么这不起作用?还是更好的方法?注意:这必须在 IE6 中工作。