table表头固定实例代码

表头固定效果是比较人性化的举措之一，尤其是表格内容较多的时候更为重要，还有一个人性化的举措就是隔行变色，这一点对于对于大数据量的表格也是非常重要的，这样可以增强行的辨识度，下面就是一段这样的代码实例。

代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
body{
  background:#FFF;
  color:#000;
  font:normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin:10px;
  padding:0
}
table, td, a{
  color:#000;
  font:normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1{
  font:normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin:0 0 5px 0
}
h2{
  font:normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin:0 0 5px 0
}
h3{
  font:normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
  color:#008000;
  margin:0 0 15px 0
}
div.tableContainer{
  clear:both;
  border:1px solid #963;
  height:285px;
  overflow:auto;
  width:756px
}
html>body div.tableContainer{
  overflow:hidden;
  width:756px
}
div.tableContainer table{
  float:left;
  width:740px
}
html>body div.tableContainer table{
  width:756px
}
thead.fixedHeader tr{
  position:relative
}
html>body thead.fixedHeader tr{
  display:block
}
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
}
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited{
  color:#FFF;
  display:block;
  text-decoration:none;
  width:100%
}
thead.fixedHeader a:hover{
  color:#FFF;
  display:block;
  text-decoration:underline;
  width:100%
}
html>body tbody.scrollContent{
  display:block;
  height:262px;
  overflow:auto;
  width:100%
}
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
}
html>body thead.fixedHeader th{
  width:200px
}
html>body thead.fixedHeader th + th{
  width:240px
}
html>body thead.fixedHeader th + th + th{
  width:316px
}
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>
<script type="text/javascript"> 
function removeClassName(elem, className){ 
  elem.className=elem.className.replace(className,"").trim(); 
} 
function addCSSClass (elem, className){ 
  removeClassName(elem,className); 
  elem.className=(elem.className+ " " + className).trim(); 
} 
String.prototype.trim = function(){ 
  return this.replace( /^\\s+|\\s+$/, "" ); 
} 
function stripedTable(){ 
  if(document.getElementById && document.getElementsByTagName) { 
    var allTables = document.getElementsByTagName('table'); 
    if(!allTables){ return; } 
    for (var i = 0; i < allTables.length; i++) { 
      if(allTables[i].className.match(/[\\w\\s ]*scrollTable[\\w\\s ]*/)) { 
        var trs = allTables[i].getElementsByTagName("tr");
        for (var j = 0; j < trs.length; j++){ 
          removeClassName(trs[j], 'alternateRow'); 
          addCSSClass(trs[j], 'normalRow'); 
        } 
        for(var k = 0; k < trs.length; k += 2){ 
          removeClassName(trs[k], 'normalRow'); 
          addCSSClass(trs[k], 'alternateRow'); 
        } 
      } 
    } 
  } 
} 
window.onload=function(){stripedTable();} 
</script>
</head>
<body>
<div id="tableContainer" class="tableContainer">
  <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
    <thead class="fixedHeader">
      <tr>
        <th><a href="#">Header 1</a></th>
        <th><a href="#">Header 2</a></th>
        <th><a href="#">Header 3</a></th>
      </tr>
    </thead>
    <tbody class="scrollContent">
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>End of Cell Content 1</td>
        <td>End of Cell Content 2</td>
        <td>End of Cell Content 3</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

代码描述：table 表头固定。table表头固定实例代码

下载全部收藏

141 188

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册