原创 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. Oracle Flashback Database

    Oracle Flashback Database Ensure that the prerequisites described in Prerequisites of Flashback Data ...

  2. master-slave replication

    redis save 备份 恢复 root@ubuntu:/etc/init.d# find / -name dump.rdb |xargs ls -alt redis-cli save cp /va ...

  3. AssertionError: View function mapping is overwriting an existing endpoint function: insertCase

    首先,理解这个错误是什么意思,以及出现的原因: 使用Flask定义URL的时候,如果出现"AssertionError: View function mapping is overwriti ...

  4. day52—JavaScript拖拽事件的应用（自定义滚动条）

    转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...

  5. Docker报错：“WARNING: IPv4 forwarding is disabled. Networking will not work.”解决。

    问题阐述 一次停电之后,服务器停机,然后ip莫名被占用,修改新的ip之后,ssh能够连接上去,但是web服务访问不了,数据库访问不了,除了22端口,其它服务端口都不能telnet. 防火前.IPtab ...

  6. Struts2 Convention Plugin ( struts2 零配置 )

    Struts2 Convention Plugin ( struts2 零配置 ) convention-plugin 可以用来实现 struts2 的零配置.零配置的意思并不是说没有配置,而是通过约 ...

  7. Delphi XE2 之 FireMonkey 入门(7) - TText 与 TFont

    TText 也是从 TShape(TControl -> TShape)继承; 而与之类似的 TLabel 的继承序列是 TControl -> TStyledControl -> ...

  8. Jenkins简介&邮箱配置

    一.Jenkins基本介绍: Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.--摘自百科 二 ...

  9. JS-在本页面禁止页面返回

    这个问题是最近遇到的 解决方案我百度的并测试有效 // 如果你希望用户不用有返回功能 可缩写如下 或使用location.replace('url')跳转链接 history.pushState(nu ...

  10. SpringBoot整合Lintener

    1.通过扫描完成Lintener组件的注册 1.1编写Listener /** * springboot整合Lintener 方式一 * 在web.xml中如何配置Listener * <lis ...