你加的代码要求页面代码符合xhtml规范的,而原来的代码是不符合的,所以显示有误.
我改了一下,基本差不多,但有个问题我不清楚,就是
tab.rows[0].style.position = "relative";造成的,rows[0]显示到了div的外面,不知道要怎么设置才行,代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
div.DataGrid
{
  overflow: auto;
  height: 160px;
  width: 400px;
}
</style>
<script language="javascript">
function fixupFirstRow(tab)
{
  var div = tab.parentNode;
  if(div.className.toLowerCase() == "datagrid")
  {
    tab.rows[0].style.zIndex = "1";
    tab.rows[0].style.position = "relative";
    div.onscroll = function()
    {
      var tr = tab.rows[0];
      tr.style.top = this.scrollTop - (this.scrollTop==0 ? 1 : 2);
      tr.style.left = -1;
    }
  }
}
window.onload = function()
{
  var tab = document.getElementById("content");
  if(tab) fixupFirstRow(tab);
}
</script></head><body><div class="DataGrid">
  <table id="content" width="600" border="1" class="table" bordercolor="#DAEAF5" align="center">
    <tr bgcolor="yellow"><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
  </table>
</div></body>
</html>