原创 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. LinkedBlockingQueue 源码分析

    LinkedBlockingQueue LinkedBlockingQueue 是基于链表实现的,可以选择有界或无界的阻塞队列. 队列的元素按照 FIFO 的顺序访问,新增元素添加到队列尾部,移除元素 ...

  2. 架构-数据库访问-SQL语言进行连接数据库服务器-DB-Library：DB-Library

    ylbtech-数据库访问-SQL语言进行连接数据库服务器-DB-Library:DB-Library 1.返回顶部 1. 在基于三层构架的信息系统开发中,应用服务器要利用SQL语言进行连接数据库服务 ...

  3. web.xml 通过contextConfigLocation配置spring 的方式

    部署到tomcat后,src目录下的配置文件会和class文件一样,自动copy到应用的 classes目录下 spring的 配置文件在启动时,加载的是web-info目录下的application ...

  4. IDE(Pycharm&&IDEA)配置文件模版

    Pycharm ====> 修改Python Script : 修改位置:Edito >> File and CodeTemplates >> Python Script ...

  5. 16/7/8_PHP-单引号和双引号的区别

    在PHP中,字符串的定义可以使用英文单引号' ',也可以使用英文双引号" ". 但是必须使用同一种单或双引号来定义字符串,如:'Hello World"和"He ...

  6. PHP上传文件到阿里云OSS,nginx代理访问

    1. 阿里云OSS创建存储空间Bucket(读写权限为:公共读) 2. 拿到相关配置 accessKeyId:********* accessKeySecret:********* endpoint: ...

  7. Java容器框架总结（一）

    本篇根据<Java编程思想> 第11章 持有对象 整理,总结Java容器框架中常用集合类及接口的特点及使用场景. (一)总结 1)数组将数字与对象联系起来:可以保存基本类型的数据:一旦生成 ...

  8. Java实验报告（一）&&第三周学习总结

    实验报告(一) 1. 打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个“水仙花数”. 源代码: public class Main { p ...

  9. data plugin for vs2019

    Reporting Service projects for VS 2019https://marketplace.visualstudio.com/items?itemName=ProBITools ...

  10. Leveldb源码分析--1

    coming from http://blog.csdn.net/sparkliang/article/details/8567602 [前言:看了一点oceanbase,没有意志力继续坚持下去了,暂 ...