如下图同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. HTTP 405 错误 – 方法不被允许 (Method not allowed)

    HTTP 协议定义一些方法,以指明为获取客户端(如您的浏览器或我们的 CheckUpDown 机器人)所指定的具体网址资源而需要在 Web 服务器上执行的动作.则这些方法如下: 介绍 OPTIONS( ...

  2. Spring-注解控件介绍

    1.@controller 控制器(注入服务) 2.@service 服务(注入dao) 3.@repository dao(实现dao访问) 4.@component (把普通pojo实例化到spr ...

  3. android studio-创建第一个项目

    打开android studio 开始界面和Xcode有点类似,点击New project新建一个工程,新建过程和在Eclipse上差不多,这里就不赘述了. 下面开始新建项目 填写项目名称,和存放地址 ...

  4. Android大神博客

    Trinea  收藏级,开源项目分析等 Android开发周刊Android各种知识 郭霖 http://blog.csdn.net/guolin_blog?viewmode=contents 鸿洋  ...

  5. C语言与套接字

    我们已经知道如何使用I/O与文件通信,还知道了如何让同一计算机上的两个进程进行通信,这篇文章将创建具有服务器和客户端功能的程序 互联网中大部分的底层网络代码都是用C语言写的. 网络程序通常有两部分组成 ...

  6. 绘制图形与3D增强技巧(一)----点图元

    1.图元 1.点图元 glBegin(GL_POINTS); glend(); 程序:点图元的应用 #include "stdafx.h" #include<stdio.h& ...

  7. [cf621E]Wet Shark and Blocks

    Description 给定$n$个数和$b$个盒子,放一些数到盒子中,使得盒子不为空.每个盒子中的数是一样的,一个数可以被放到多个盒子中. 从每个盒子中取一个数,组成一个$b$位数,如果这个数$mo ...

  8. Leetcode Power of two, three, four

    Given an integer, write a function to determine if it is a power of two. Hint: Could you solve it in ...

  9. pip卡住不动的解决方案

    用的是anaconda2,也就是python在windows下的最好的一键安装包,有numpy scipy matplotlib等常用包预装好了 最近搞caffe的python接口,需要装protob ...

  10. 【BZOJ-4173】数学 欧拉函数 + 关于余数的变换

    4173: 数学 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 306  Solved: 163[Submit][Status][Discuss] D ...