`

table表头和列头固定

阅读更多 
<!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> 
    body{font-size:12px;} 
    .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000} 
    .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px} 
    .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px} 
    .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center} 
    .dd{height:200px!important; height:208px; overflow-y:hidden;} 

    .t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000} 
    .t_i_h{width:100%; overflow-x:hidden; background:buttonface;} 
    .ee{width:618px!important; width:620px} 
    .t_i_h table{width:600px;} 
    .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center} 
    .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;} 
    .cc table{width:600px; } 
    .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center} 
</style> 
<script> 
  function aa(){ 
     var a=document.getElementById("cc").scrollTop; 
     var b=document.getElementById("cc").scrollLeft; 
      document.getElementById("dd").scrollTop=a; 
      document.getElementById("hh").scrollLeft=b; 
  } 
</script> 
</head> 

<body> 
<div class="t_n"> 
    <span>序号</span> 
    <div class="dd" id="dd"> 
        <table cellpadding="0" cellspacing="0" border="0" class="t_number"> 
            <tbody> 
                <tr> 
                <td>1</td> 
                </tr> 
                <tr> 
                <td>2</td> 
                </tr> 
                <tr> 
                <td>3</td> 
                </tr> 
                <tr> 
                <td>4</td> 
                </tr> 
                <tr> 
                <td>5</td> 
                </tr> 
                <tr> 
                <td>6</td> 
                </tr> 
                <tr> 
                <td>7</td> 
                </tr> 
                <tr> 
                <td>8</td> 
                </tr> 
                <tr> 
                <td>9</td> 
                </tr> 
                <tr> 
                <td>10</td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
</div> 
<!--table栏目--> 
<div class="t_i"> 
    <div class="t_i_h" id="hh"> 
        <div class="ee"> 
            <table cellpadding="0" cellspacing="0" border="0"> 
             <tr> 
               <td width="10%">栏目A</td> 
               <td width="20%">栏目B</td> 
               <td width="10%">栏目C</td> 
               <td width="20%">栏目D</td> 
               <td width="20%">栏目E</td> 
               <td width="20%">栏目F</td> 
             </tr> 
            </table> 
        </div> 
    </div> 
    <div class="cc" id="cc" onscroll="aa()"> 
        <table cellpadding="0" cellspacing="0" border="0"> 
            <tr> 
                <td width="10%">1</td> 
                <td width="20%">1</td> 
                <td width="10%">1</td> 
                <td width="20%">1</td> 
                <td width="20%">1</td> 
                <td width="20%">1</td> 
            </tr> 
            <tr> 
                <td>2</td> 
                <td>2</td> 
                <td>2</td> 
                <td>2</td> 
                <td>2</td> 
                <td>2</td> 
            </tr> 
            <tr> 
                <td>3</td> 
                <td>3</td> 
                <td>3</td> 
                <td>3</td> 
                <td>3</td> 
                <td>3</td> 
            </tr> 
            <tr> 
                <td>4</td> 
                <td>4</td> 
                <td>4</td> 
                <td>4</td> 
                <td>4</td> 
                <td>4</td> 
            </tr> 
            <tr> 
                <td>5</td> 
                <td>5</td> 
                <td>5</td> 
                <td>5</td> 
                <td>5</td> 
                <td>5</td> 
            </tr> 
            <tr> 
                <td>6</td> 
                <td>6</td> 
                <td>6</td> 
                <td>6</td> 
                <td>6</td> 
                <td>6</td> 
            </tr> 
            <tr> 
                <td>7</td> 
                <td>7</td> 
                <td>7</td> 
                <td>7</td> 
                <td>7</td> 
                <td>7</td> 
            </tr> 
            <tr> 
                <td>8</td> 
                <td>8</td> 
                <td>8</td> 
                <td>8</td> 
                <td>8</td> 
                <td>8</td> 
            </tr> 
            <tr> 
                <td>9</td> 
                <td>9</td> 
                <td>9</td> 
                <td>9</td> 
                <td>9</td> 
                <td>9</td> 
            </tr> 
            <tr> 
                <td>10</td> 
                <td>10</td> 
                <td>10</td> 
                <td>10</td> 
                <td>10</td> 
                <td>10</td> 
            </tr>  
        </table> 
    </div> 
</div> 
</body> 
</html>

 

分享到：
| 解决showModelDialog提交表单时打开新窗口 ...
评论
1 楼 qq565802669 2012-06-18  
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics