`

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  
发表评论

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

相关推荐

    实现Table表头和列固定

    "实现Table表头和列固定"的目标就是解决这一问题，保持表头在滚动时始终显示，同时支持多表头和多列固定，确保布局清晰，无错位。 首先，我们需要理解HTML中的`&lt;table&gt;`元素是用于创建表格的基本结构。它由`&lt;thead&gt;...

    table表头及列固定

    但是，当涉及到列固定时，问题就变得复杂了，因为浏览器不支持原生的列固定功能。这时，jQuery库可以派上用场，提供更灵活的解决方案。 使用jQuery实现列固定的一种常见方法是创建一个新的CSS类，为固定的列添加...

    html Table 表头固定的实现

    这样，无论表格如何滚动，表头列和表格主体的列宽度都会保持一致。 接下来，我们看下如何通过CSS来定义固定表头的效果。首先，我们需要为表头定义一个CSS类，比如这里的.table-head，然后为其设置固定的高度和背景...

    移动端table固定表头与固定第一列

    本教程将详细讲解如何在移动端实现"固定表头与固定第一列"的功能，以提升用户体验，使得用户在滚动时能够始终保持表头和第一列可见。 首先，我们需要理解HTML5中的`&lt;table&gt;`元素，它是用于创建表格的标准标签。在...

    html table 固定表头和列

    "html table 固定表头和列"这个主题就是关于如何在滚动时使HTML表格的表头（thead）和第一列（或列组）始终保持可见。 一、HTML表格基础 在HTML中，`&lt;table&gt;`元素用于创建表格，`&lt;tr&gt;`定义表格行，`&lt;th&gt;`定义表头...

    基于jquery的固定html table表头/列头插件

    为解决这一问题，基于jQuery的固定html table表头/列头插件应运而生，例如本案例中的"jquery.fixedtable.js"。 jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画效果。在jQuery基础上...

    table固定表头和列头

    固定表头和列头

    jquery表头固定、列固定完美解决方案

    总结来说，"jquery表头固定、列固定完美解决方案"是通过jQuery库和自定义JavaScript插件实现的一种优化用户体验的方法，特别是在处理大量数据的表格时。它提供了表头和列的固定功能，使用户在浏览长表格时能更方便地...

    asp.net html+table固定表头和左侧列.rar

    在这个“asp.net html+table固定表头和左侧列.rar”压缩包中，我们聚焦的是如何在HTML表格（Table）中实现固定表头（Fixed Header）和左侧列（Fixed Left Column）的功能，以便在用户滚动页面时，这些关键信息始终...

    固定列头表头ListScroll

    【固定列头表头ListScroll】是一种在Android开发中实现的高级UI组件，它结合了ListView和ScrollView的优点，主要用于展示大量数据并具有横向滚动和纵向滚动功能的表格。这种组件通常用于显示复杂的数据结构，例如...

    table固定表头固定列源码

    table表格固定表头与固定列的源代码，用css样式来设置，只支持ie系统浏览器

    h5 固定表头及列头demo

    "h5 固定表头及列头demo"是针对H5网页中的数据展示问题而设计的一个实例，它解决了在滚动时保持表头和列头可见的问题。这种技术在大数据量的表格中尤其有用，因为它能让用户在浏览长表格时始终能看到列名和行名，...

    移动web table固定表头第一列.rar

    -- 其他表头列 --&gt; 固定数据 &lt;!-- 其他数据列 --&gt; &lt;!-- 更多数据行 --&gt; &lt;/table&gt; ``` 接下来，利用CSS3来实现固定效果。我们可以使用绝对定位来固定表头和第一列。为`&lt;table&gt;`设置相对定位，以便于...

    vue表格实现固定表头首列

    在Vue移动端项目中，开发人员经常遇到需要创建具备固定表头和首列的表格，以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下，利用Vue的核心特性实现这样一个功能。 首先，我们需要理解...

    table的表头固定

    在网页设计中，"table的表头固定"是一种常见的需求，尤其在展示大量数据时，保持表头在页面滚动时始终可见，可以帮助用户更好地理解数据列的含义。在这个场景下，我们通常会使用HTML的`&lt;table&gt;`元素来构建表格，并...

    html 表头固定及列固定

    为了解决这个问题，我们可以使用CSS和其他技术实现“html 表头固定”和“列固定”，使用户在滚动浏览时始终能看到表头和特定列的内容。以下将详细介绍这两种方法。 ### 一、表头固定（Header Fixing） 表头固定的...

    固定table表头的插件

    在实际应用中，"golovko-Fixed-Header-Table-aa40378"插件可能提供了更高级的功能，如自定义样式、滚动平滑效果、多列固定等，使得固定表头的实现更加灵活和强大。开发者可以通过解压并查看压缩包中的文件，学习其...

    js固定表头和第一列固定

    js固定表头和第一列固定，内容变化

    复杂表头固定表头和列.html

    复杂表头固定行，固定列，纯css实现，样式可修改，可根据自己要求，更改表头，以及固定列的数量，本人亲测，确实好用

    table表头及表头列锁定

    在IT行业中，尤其是在网页开发和数据展示领域，"table表头及表头列锁定"是一项重要的技术需求。它主要用于创建动态、长数据量的表格，使得用户在滚动查看大量数据时，表头始终保持可见，方便用户理解每一列数据的...

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