如下图同Excel表格首行固定:

<style>
.table{    width: 100%;    border-collapse:collapse;    border-spacing:0;}

.table thead{display: block; width: 100%; background: #ddd;} 
.table tbody{display: block; height:70px; overflow: auto; width: 100%; border: 1px solid #ddd;}
.table td,.table th { width: 200px; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px }
.table tr{ border-bottom: 1px solid #B74; } </style>
<table class="table">
<thead>
<tr>
<th>header</th>
<th>header two</th>
<th>header two</th>
<th>header two</th>
<th>header two</th>
<th>header two</th>
</tr>
</thead>
<tbody class="M_scrollBar">
<tr>
<td>fuck 1</td>
<td>fuck 2</td>
<td>fuck 2</td>
<td>fuck 2</td>
<td>fuck 2</td>
<td>fuck 2</td>
</tr>
<tr>
<td>fuck 1</td>
<td>fuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>kfuc<br>k 2</td>
<td>fuck 2</td>
<td>fuck 2</td>
<td>fuck 2</td>
<td>fuck 2</td>
</tr>
<tr>
<td>fuck 1</td>
<td>fuck 2</td>
<td>fuck 2</td>
<td>fuck 2</td>
<td>fuck 2</td>
<td>fuck 2</td>
</tr>
<tr>
<td>fuck 1</td>
<td>fuck 2</td>
<td>fuck 2</td>
<td>fuck 2</td>
<td>fuck 2</td>
<td>fuck 2</td>
</tr>
</tbody>
</table>

html 表格head头部不动 body部分滚动,每格宽同内容增加的更多相关文章

  1. 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  2. excel表格中打开可以显示整个表格但是打印却只能打印一个单元格

    excel表格中打开可以显示整个表格但是打印却只能打印一个单元格 如下图显示 解决办法 2007 版菜单栏上 ----->页面布局----->打印区域----->取消打印.即可正常. ...

  3. Swift - 可编辑表格样例(可直接编辑单元格中内容、移动删除单元格)

    (本文代码已升级至Swift3)   本文演示如何制作一个可以编辑单元格内容的表格(UITableView). 1,效果图 (1)默认状态下,表格不可编辑,当点击单元格的时候会弹出提示框显示选中的内容 ...

  4. js如何实现动态显示表格数据(点奇数显示奇数单元格内容)

    js如何实现动态显示表格数据(点奇数显示奇数单元格内容) 一.总结 一句话总结: 1.动态指定表格中每个单元格的id,然后通过id可以获取每个单元格,然后对里面的innerHTML进行赋值. 2.弄了 ...

  5. JS遍历表格获取每行数据及每个单元格数据

    /** * 遍历表格获取每行数据及每个单元格数据 * @param tableID 表格ID */ function GetTable(tableID) { var milasUrl = {};//新 ...

  6. 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动

    一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...

  7. css固定div头部不随滚动条滚动

    给div加浮动: position:fixed; 固定宽度,高度,距离头部,左部为0:width: 99%; height: 80px; top:0; left: 0;

  8. pc页面滚动的时候,背景图不动只是页面滚动

    代码如下,直接拷贝出去就能看效果: 用到的方法 background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动. <!DOCTYPE html> <h ...

  9. 容器,表格 ,div,元素可左右拖动,滚动 css

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. poi-处理excel的单元格日期数据

    poi处理excel时,当excel没有明确指明是哪个类型的数据时,poi很可能处理单元格的日期数据时就有可能是一串数字.而使用java程序基本无法转换 以下为对poi处理日期情况一些方面的处理(不是 ...

  2. sql 定义自增id插入数据

    -- 定义一个自增变量 ; -- 执行自增语句 ,sponsorbroker,,, from stock_listing_detailed_info group by sponsorbroker;

  3. pch文件的使用

    pch文件的应用场景:1.用来定义一些全局的宏2.用来导入一些全局都能访问的头文件(如果只需要让.m或者.mm文件访问到,不需要让.c文件访问到,那么需要把头文件写到#ifdef _OBJC_ #en ...

  4. [转]关于网络通信,byte[]和String的转换问题

    最近的项目中要使用到把byte[]类型转换成String字符串然后通过网络发送,但发现发现出去的字符串和获取的字符串虽然是一样的,但当用String的getBytes()的方法得到的byte[]跟原来 ...

  5. bzoj4305: 数列的GCD

    要求k个与原序列中的数不同,就是要求(n-k)个相同,令K=n-k 然后cnt[i]表示序列a中i的倍数的个数 f[i]表示gcd为i的倍数的方案数 f[i]=C(cnt[i],K)*(m/i-1)^ ...

  6. 【uoj261】 NOIP2016—天天爱跑步

    http://uoj.ac/problem/261 (题目链接) 题意 给出一棵树,给出一些起点和终点,没走一条路径耗费时间1,每个节点上有一个权值w,问有多少条路径经过这个节点时所用的时间恰好是w. ...

  7. 使用StyleCop进行代码审查

    使用StyleCop进行代码审查 工欲善其事,必先利其器,上篇简单介绍了怎样使用Astyle进行代码格式化,使编写的代码具有一致的风格.今天简单介绍下怎样使用StyleCop对原代码进行审查,看编写的 ...

  8. Python – locals和globals

    转载: Python两个内置函数--locals 和globals (学习笔记) Python两个内置函数locals 和globals, 这两个函数主要提供,基于字典的访问局部和全局变量的方式.在理 ...

  9. iOS - 装饰对象

    1.设计模式原则 多组合,少继承 类对拓展开放,对修改关闭 派生的子类接口是在编译时就静态决定的,而所有子类都会继承到相同的接口.然而,利用组合或者说装饰模式来拓展抽象类的接口,就可以在运行时动态的进 ...

  10. Linux安装配置sun-java

    一(不推荐) 1. 下载源码与解压 将下载的源码包,移动到/opt目录下: $ sudo mv ~/Downloads/jdk-8u65-linux-x64.tar.gz  /opt/ 解压: $ s ...