原创 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. 关于Idea热部署，修改代码不需要重启tomcat

  2. centos 6.x 安装配置 node.js 环境

    下载 可以在本地下载node.js最新版,然后通过ftp工具上传到服务器,或者直接在服务器终端使用wget命令下载(我当时下载的是node-v6.11.3-linux-x64版本,其他版本请查看上面链 ...

  3. MySQL高可用架构之MySQL5.7.19 PXC

    CentOS7.3下Percona-XtraDB-Cluster-5.7.19集群部署PXC三节点安装:node1:10.10.10.11 node2:10.10.10.12node3:10.10.1 ...

  4. Netty 系列之 Netty 高性能之道 高性能的三个主题 Netty使得开发者能够轻松地接受大量打开的套接字 Java 序列化

    Netty系列之Netty高性能之道 https://www.infoq.cn/article/netty-high-performance 李林锋 2014 年 5 月 29 日 话题:性能调优语言 ...

  5. flex embed 使用

    Flex 软件中经常需要使用一些外部的资源,如图片.声音.SWF或字体,虽然你也可以在软件运行的时候引入和载入,但是也可能经常需要直接将这些资源编译(Compile)到软件中,也就是直接嵌入资源(Em ...

  6. jsonify返回中文乱码的问题

    参考博客: 解决flask中文乱码的问题 返回内容如图: 实际填写的内容: 从网上找答案,结果很多都是说配置app.config,如下: app.config['JSON_AS_ASCII'] 但我试 ...

  7. VMware 虚拟化编程(7) — VixDiskLib 虚拟磁盘库详解之三

    目录 目录 前文列表 VixDiskLib 虚拟磁盘库 VixDiskLib_GetMetadataKeys VixDiskLib_ReadMetadata 获取虚拟磁盘元数据 VixDiskLib_ ...

  8. 安全测试工具之AppScan（Application）

    AppScan是一款Web应用安全测试工具,也是唯一一个在所有级别应用上提供安全纠正任务的工具.AppScan扫描Web应用的基础架构,进行安全漏洞测试并提供可行的报告和建议.AppScan的扫描能力 ...

  9. hbase报错之 Master is initializing

    报错日志 ERROR: org.apache.hadoop.hbase.PleaseHoldException: Master is initializing at org.apache.hadoop ...

  10. arduino库函数1

    https://wenku.baidu.com/view/e657b1f0bcd126fff6050baf.html 的阅读笔记.现在到了 第四十页. setup应该是 在开始 执行一次. 然后 lo ...