table固定首行(二)

最新推荐文章于 2024-07-07 23:10:31 发布
最新推荐文章于 2024-07-07 23:10:31 发布
阅读量68 收藏
点赞数
文章标签： xhtml 
<!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>

 

weixin_33881050
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web table + div + jquery 实现仿 excel 的冻结 首行 与 首列 完整Demo
06-27
实用 table + div + Jquery 实现，没有实用IE特有的expression(), 所以 兼容性 很好。 核心思想： 用JQuery的clone 复制 出 4张表， 分别放于 4 个 div 中来实现 水平 垂直 滚动， 首行 首列 冻结效果。
html的table滚动时固定首行和首列
11-26
html的table滚动时固定首行和首例，网上多为3个table拼合实现，现使用一个table实现
table冻结列，可冻结首行，首列
zhaofuqiangmycomm的博客
10-31 6534
原理 表格左右拆分，再上下拆分，最后拆分为四个table容器 滚动右下table时，加scroll事件，控制左下scrollTop与右上scrollLeft两个table的scroll值 注意 左下、右上overflow: hidden,右下overflow: scroll 左下、右下最后需要新增<td style="visibility: hidden;"></td&g...
固定table表格首列
weixin_30505043的博客
01-22 218
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #freezing{ width: 400px; ...
完美解决table首行首列固定滚动条适应表格宽度
01-20
1、数据较多时需要横向竖向滚动，很多数值记不清谁是谁了，所以需要主要标题内容需要固定。 2、通常的首行首列的固定，下方滚动条左侧会空缺一块，不够美观，我加了一层悬浮的div 给予适应
javascript 绘制表格table,可以固定首行,首列
12-22
javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.
移动端table固定表头与固定第一列
02-20
这里我们假设有一个类名为`.table-first-col`的容器，包含了所有需要固定的第一列单元格。当然，实际应用中，你可能需要根据具体布局调整这个类名或者使用其他方法选择第一列。 为了处理滚动，可以监听滚动事件，当...
可固定TABLE表格的首行与首列，可拖动查看更多内容
07-09
标题中的“可固定TABLE表格的首行与首列，可拖动查看更多内容”是指在网页设计中，使用HTML的表格（TABLE）元素时，通过CSS和JavaScript技术实现的一种交互功能。这种功能允许用户在滚动表格内容时，表格的表头...
table固定首行首列css 最简单方法（亲测可用）
weixin_49798182的博客
05-30 4220
业务需要前端使用html 写了个table 如图： 需要滚动条上下左右滑动，但是固定首航首列关键代码：/* 首列固定 */left: 0;z-index: 1;/* 表头固定 */top: 0;z-index: 2;/* 表头首列强制最顶层 */z-index: 3;解析：关键属性 css :在 视口滚动到元素 top 距离小于 0px 之前，元素为相对定位。之后，元素将固定在与顶部距离 0px 的位置，直到视口回滚到阈值以下；同理。
vue表格实现固定表头首列
11-02
vue移动端项目 一个可以固定表头首列的表格 ，没有使用UI插件。 感兴趣的朋友可以参考下，希望对大家有所帮助
css+jquery完美实现table表头固定显示(浮动)
11-18
利用css和jquery实现table表头固定（浮动）显示，不复制表格内容，不更改页面元素，完全通过js设置样式来实现。
table表头浮动
12-04
通过javascript实现table表头固定浮动
html固定第一列第一行 其他可以滚动
chao331303的专栏
04-17 6249
文号                                                                                                                                                       日期                
table固定首行(一)
weixin_34014277的博客
09-11 451
&lt;html&gt; &lt;head&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;/head&gt; &lt;script&gt
Vue -- element-ui el-table 的合计在第一行显示并可点击
weixin_30602505的博客
05-18 2116
使用element-ui el-table 中有这样一个需求，需要将合计放在表格内容的第一行，并且点击合计可跳转到其它页面！ 框架中提供了合计的属性方法，这样可以进行数值求和及自定义求和，但是，合计那一栏不能添加点击跳转功能，结构默认排到最底行，不满足需求 解决思路： 调节样式； 将合计的数据单独计算出来/接口返回，添加到数组第一个位置，这样就可以很好的控制合计这一行了。 HTML <...
table-首列冻结
qq_16570607的博客
02-25 470
首先，table外层套两层div，outerDiv和 innerDiv <div class="outerDiv"> <div class="innerDiv"> <table border="0" class="table"> <thead class="thead"> ...
第二章-在HTML中使用JavaScript
最新发布
2301_79858637的博客
07-07 1294
事实上，WEB的核心语言是HTML，如何做到让JavaScript既可以与HTML页面共存，又不影响页面在其他浏览器中的呈现效果呢？要为WEB浏览器提供核心的脚本支持.
el-table固定表头和首行
06-02
要在 Element UI 的 el-table 组件中同时固定表头和首行，请使用以下代码： ``` <el-table :data="tableData" style="width: 100%" border> <el-table-column prop="name" label="姓名" fixed="left" width="100">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值