原创 https://blog.csdn.net/q3585914/article/details/69946478

table表头和首列的表格固定-CSS实现的Table表头固定

原创 2017年04月10日 14:06:21
  • 14190

效果就是上图 表头是固定的， 
跟随滑动轴动，左边第一列也是可以跟谁滑动轴滚动 
下面是代码原文是查看

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="author" content="jack">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,

        user-scalable=no" />

<!-- 适应手机屏幕，防止屏幕缩放 -->

<!--样式-->

<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">

</head>

<body>

<title>固定表头和首列的表格</title>

<style type="text/css">

#left_div{

    width:100px;

    float: left;

}

#left_div1{

    width: 100%;

}

#left_div2{

    margin-top:-20px;

    width: 100%;

    height: 400px;

    overflow: hidden;

}

#left_table1 th{

    background: #E9F8FF;

    text-align:center;

}

#left_table2 th{

    text-align:center;

}

#right_div{

    float: left;

}

#right_div1{

    width: 100%;

    overflow: hidden;

}

#right_divx{

    width: 900px;

}

#right_div2{

    margin-top:-20px;

    width:100%;

    height:400px;

    overflow: auto;

}

#right_table1{

    width: 880px;

}

#right_table2{

    /**width和max-width一起写，手机浏览器打开也能固定长度**/

    width: 880px;

    max-width: 880px;

    white-space:nowrap;

}

#right_table1 th{

    background: #E9F8FF;

    text-align:center;

    width:10%;

}

#right_table2 td{

    width:10%;

    text-align:center;

}

</style>

<div class="container-fluid">

  <div id="left_div">

    <div id="left_div1">

      <table id="left_table1" class="table table-bordered">

        <tr>

          <th>我不会动</th>

        </tr>

      </table>

    </div>

    <div id="left_div2">

      <table id="left_table2" class="table table-bordered">

      </table>

    </div>

  </div>

  <div id="right_div">

    <div id="right_div1">

      <div id="right_divx">

        <table id="right_table1" class="table table-bordered">

          <tr>

            <th>我是表头</th>

            <th>我是表头</th>

            <th>我是表头</th>

            <th>我是表头</th>

            <th>我是表头</th>

            <th>我是表头</th>

            <th>我是表头</th>

            <th>我是表头</th>

            <th>我是表头</th>

            <th>我是表头</th>

          </tr>

        </table>

      </div>

    </div>

    <div id="right_div2">

      <table id="right_table2" class="table table-bordered">

      </table>

    </div>

  </div>

</div>

<!--脚本-->

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script src="./bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">

//固定和滚动

var right_div2 = document.getElementById("right_div2");

right_div2.onscroll = function(){

    var right_div2_top = this.scrollTop;

    var right_div2_left = this.scrollLeft;

    document.getElementById("left_div2").scrollTop = right_div2_top;

    document.getElementById("right_div1").scrollLeft = right_div2_left;

}

//设置右边div宽度

document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px";

setInterval(function() {

    document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px";

}, 0);

for(var i=0;i<24;i++){

    $("#left_table2").append("<tr><th>我是首列</th></tr>");

    $("#right_table2").append("<tr><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td></tr>");

}

</script>

</body>

</html>

这句js 不要忘记加了

var right_div2 = document.getElementById("right_div2");

right_div2.onscroll = function(){

    var right_div2_top = this.scrollTop;

    var right_div2_left = this.scrollLeft;

    document.getElementById("left_div2").scrollTop = right_div2_top;

    document.getElementById("right_div1").scrollLeft = right_div2_left;

}

//设置右边div宽度

document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px";

setInterval(function() {

    document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px";

}, 0);

如果你遇到问题，可以加群315552185 
一起交流哦！

css 表单头部固定的更多相关文章

  1. CSS表单设计

    今天我们开始学习<十天学会web标准(div+css)>的css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一 ...

  2. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  3. Web标准：九、CSS表单设计

    Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验   1)改变文本框和文本域样式 文本框标签:<i ...

  4. css 表单标签两端对齐

    来自:http://demo.doyoe.com/css3/justify/justify-form.htm  侵删 <!DOCTYPE html> <html lang=" ...

  5. CSS 表单

    输入框前有图片 老板让你实现在输入框前有图片的功能.老板觉得用图片代替文字更有说服力. 要实现这样的功能很简单,它的原理是将图片放在内边距内. 代码 1 2 3 4 5 6 7 8 9 10 11 1 ...

  6. bootstrap -- css -- 表单控件

    若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...

  7. 什么是CSS 表单？

    ㈠输入框(input) 样式 ⑴使用 width 属性来设置输入框的宽度   示例:css部分:input { width: 100%; }                html部分:<for ...

  8. CSS表单与数据表（下）

    2.表单 表单是用户输入内容的地方.表单涉及的控件很多,而且一直很难给它们应用样式.无法控制样式的部分,可以通过自定义控件来解决. 2.1 简单的表单 2.1.1 fieldset与legend fi ...

  9. CSS表单与数据表（上）

    表单在现代Web应用中占据着重要地位. 表单可以很简单,也可以非常复杂,要横跨几个页面. 除了从用户哪里获得数据,Web应用还需要以容易看懂的方式展示数据.表格是展示复杂数据的最佳方式. 1.设计数据 ...

随机推荐

  1. 阿里云服务器+ubantu+nodejs 服务器基本配置流程

    所有步骤在MAC 电脑环境下操作 一.配置环境 1.连接到远程服务器 1.购买阿里云ECS服务器,我选用的 ubantu 14.0.4 (64位),购买的时候输入的密码记录下来,没有设置的话可以随后在 ...

  2. 解决Firefox已阻止运行早期版本Adobe Flash

      解决Firefox已阻止运行早期版本Adobe Flash     类别    [随笔分类]web   解决Firefox已阻止运行早期版本Adobe Flash   最近火狐浏览器不知抽什么风, ...

  3. MVC2: 路由 及 遇到问题记录

    MVC 路由 重定向 问题记录 1)MVC 路由 入口方法: (Global.asax)Application_Start()--->(App_Start/RouteConfig.cs)Regi ...

  4. iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化

    首先需要安装vue cli 3.0版本 点击添加插件, 输入iview 选中后安装 全部导入还是按需导入. 2.是否需要自定义主题变量 3.多语言的设置. 这里我们全部选择为默认 然后点击继续. 启动 ...

  5. 【SD系列】SAP 创建销售订单-用外部给号的方法步骤

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[SD系列]SAP 创建销售订单-用外部给号的方 ...

  6. html5 WebSocket的Js实例教程

    详细解读一个简单+ ,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读. 从WebSocket通讯三个阶段(打开握手.数据传递. ...

  7. Java{0}占位符替换字符串

    Java{0}占位符替换字符串 public class Test { public static void main(String[] args) { System.out.println(Stri ...

  8. Console.Out 属性和 XmlDocument.Save 方法 (String)

    Console.Out 属性 默认情况下,此属性设置为标准输出流. 此属性可以设置为另一个流SetOut方法. 请注意,调用Console.Out.WriteLine方法是等效于调用相应WriteLi ...

  9. linux系统中的基础监控（硬盘，内存，系统负载，CPU，网络等）

      Linux系统常见日常监控 系统信息 查看 CentOS 版本号:cat /etc/redhat-release 综合监控 nmon 系统负载 命令:w(判断整体瓶颈) 12:04:52 up 1 ...

  10. Leveldb源码分析--3

    http://blog.csdn.net/sparkliang/article/details/8604416