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>

时间： 2024-12-25 12:12:16

table固定首行(二)的相关文章

table固定首行(一)

<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script> function syncscroll(obj) { //y.innerHTML = obj.scrollTop; //

本文地址: https://www.cnblogs.com/veinyin/p/12101047.html 需求描述:首行固定,吸附在表头下,数据多时其他行可以纵向滚动方案一两个表格拼凑第一个表格展示头部和固定行第二个表格展示其它数据示意图如下适用场景:仅横向纵向均无滚动条时可用若有横向滚动条,两个表格的滚动条是分开的,会出现滚动A B不动,或滚动B A不动的情况,Windows下会展示两个横向滚动条,不美观若有纵向滚动条,在Windows下滚动条是默认有宽度的,滚动条的宽

Java读取excel指定sheet中的各行数据，存入二维数组，包括首行,并打印

1. 读取 //读取excel指定sheet中的各行数据,存入二维数组,包括首行 public static String[][] getSheetData(XSSFSheet sheet) throws IOException { String[][] testArray = new String[sheet.getPhysicalNumberOfRows()][]; for(int rowId =0;rowId<sheet.getPhysicalNumberOfRows();rowId++)

div+CSS实现段落首行缩进两个字符

段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. 在这里我们需要了解一种长度单位em.em是相对长度单位.相对于当前对象内文本的字体尺寸.我们中文段落一般每段前空两个汉字.实际上,就是首行缩进了2em. <style type="text/css"><!-- p{text-indent: 2em; /*em是相对单位

js在table指定tr行上或底下添加tr行

js在table指定tr行上或下面添加tr行 function onAddTR(trIndex) { var tb = document.getElementById("tb1"); var newTr = tb.insertRow(trIndex);//添加新行,trIndex就是要添加的位置 var newTd1 = newTr.insertCell(); newTd1.

WordPress文章首行缩进

WordPress后台编辑文章的时候会自动删除多余的空格,也就是说,你在后台编辑文章的时候添加的一些空格和换行在前台都是看不见的,都是被WordPress忽略了的,今天就讲讲怎么给所有文章添加首行缩进: 方法一: 网上的代码,我没有试过. 在functions.php中添加下面的代码: 1 2 3 4 5 //WordPress 文章首行缩进 function Bing_paragraph_indentation( $content ){ return str_replace( '<p'

【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redirect(Request.UrlReferrer.ToString());} else { //没有来路地址 Response.Redirect("index.aspx"); 二.Js获取table中的行数与列数 var table =document.getElementById(&qu

高度固定，行数不固定的文字垂直居中问题

大家都知道,水平方向上的居中很好做到,text-align:center即可做到:垂直方向上的居中如果文字行数和高度都固定也很好实现,但是如果行数不固定呢? 最近,接到一个需求:高度固定,文字行数可能为一行.两行,但不管多少行,文字都要垂直居中.例如: 对于H5页面来说,CSS3的translate即可做到,其原理是外层div相对定位,里面的元素绝对定位,距离父容器的top值为50%,然后通过translate属性让它相对于自身向上移动50%. 其css为: 对于PC来说,就没这么好糊弄了:低版

关于css的text-indent首行缩进两个字符和图片缩进的问题

段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent. text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. <style type="text/css"> p{ text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/ } </style> 注:div标签不要忘记起始符.text-indent只对p或div标签有效,对br标签不生效,原因是br标签是换行标签不是分段