原创 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. 从 Quora 的 187 个问题中学习机器学习和NLP

    从 Quora 的 187 个问题中学习机器学习和NLP 原创 2017年12月18日 20:41:19 作者:chen_h 微信号 & QQ:862251340 微信公众号:coderpai ...

  2. 【tensorflow使用笔记三】：tensorflow tutorial中的源码阅读

    https://blog.csdn.net/victoriaw/article/details/61195620#t0 input_data 没用的另一种解决方法:tensorflow1.8版本及以上 ...

  3. 协议：FTP

    ylbtech-协议:FTP FTP(File Transfer Protocol,文件传输协议) 是 TCP/IP 协议组中的协议之一.FTP协议包括两个组成部分,其一为FTP服务器,其二为FTP客 ...

  4. pom.xml文件设置

    一个相对完整的maven配置文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...

  5. 001/Node.js(Mooc)--基础知识

    一.Node.js基础知识 node.js用C++语言编写. 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时 ...

  6. C#后台获取日期:当天、前七天、后七天

    DateTime.Now.ToString(); //当前时间DateTime.Now.AddDays(7).ToString(); //当前时间加上7天DateTime.Now.AddDays(-7 ...

  7. 简述Vue中的计算属性

    1.什么是计算属性 如果模板中的表达式存在过多的逻辑,那么模板会变得臃肿不堪,维护起来也异常困难,因此为了简化逻辑出现了计算属性: <template> <div id=" ...

  8. SpringBoot(六) -- SpringBoot错误处理机制

    一.SpringBoot中的默认的错误处理机制 1.在SpringBootWeb开发中,当我们访问请求出现错误时,会返回一个默认的错误页面: 2.在使用其他客户端访问的时候,则返回一个json数据: ...

  9. vps配置ipv6地址

    1.修改配置文件 vim /etc/network/interfaces 2.添加以下内容 auto he-ipv6 iface he-ipv6 inet6 v4tunnel address 2001 ...

  10. ajax与json总结

    1.jquery中调用ajax方法 $.ajax({ async:true, type:"post", url:"xxxServlet", data:{&quo ...