现在的位置: 首页 > 综合 > 正文

实现在一个TABLE表中,保持表头不动,固定表头

2013年10月12日 ⁄ 综合 ⁄ 共 6533字 ⁄ 字号 评论关闭
<html>
<head>
<title></title>
<style>
//此式样将第一行一直保留在页面上,不随滚动条的移动而移动
.Freezing_tdd
{
top:expression(document.getElementById('div-1').scrollTop-1);
    position:relative ; 
}
</style>
</head>
<body>
<div id="div-1" style="width:50%;height:30%;overflow:auto">
<table border="1" cellspacing="1" cellpadding=0 id="scroll"  style="table-layout:fixed;">
      <tr align="left" class="Freezing_tdd" valign="middle" bgcolor="#C4E0FF" height="23" id="titleD">
        <td  width="100" >&nbsp;序号</td>
        <td  width="500" height="23" >&nbsp;企业名称</td>
        <td width="80" height="23" >&nbsp;联系人</td>
        <td  width="120" height="23">&nbsp;联系电话</td>
         </tr> 
      <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr>  
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr>  
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr>  
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
        <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
         <tr align="left"  valign="middle" height="23">
        <td height="23" >&nbsp;序号</td>
        <td  height="23" >&nbsp;企业名称</td>
        <td height="23">&nbsp;联系人</td>
        <td  height="23">&nbsp;联系电话</td>
         </tr> 
</table>
</div>
<font color="red">PS:将table放入一个指定大小的div中,固定Table表头,将表格第一行Tr中加入css:Freezing_tdd</font>
</body>
</html>

抱歉!评论已关闭.