html 表格head头部不动 body部分滚动,每格宽同内容增加
如下图同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部分滚动,每格宽同内容增加的更多相关文章
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- excel表格中打开可以显示整个表格但是打印却只能打印一个单元格
excel表格中打开可以显示整个表格但是打印却只能打印一个单元格 如下图显示 解决办法 2007 版菜单栏上 ----->页面布局----->打印区域----->取消打印.即可正常. ...
- Swift - 可编辑表格样例(可直接编辑单元格中内容、移动删除单元格)
(本文代码已升级至Swift3) 本文演示如何制作一个可以编辑单元格内容的表格(UITableView). 1,效果图 (1)默认状态下,表格不可编辑,当点击单元格的时候会弹出提示框显示选中的内容 ...
- js如何实现动态显示表格数据(点奇数显示奇数单元格内容)
js如何实现动态显示表格数据(点奇数显示奇数单元格内容) 一.总结 一句话总结: 1.动态指定表格中每个单元格的id,然后通过id可以获取每个单元格,然后对里面的innerHTML进行赋值. 2.弄了 ...
- JS遍历表格获取每行数据及每个单元格数据
/** * 遍历表格获取每行数据及每个单元格数据 * @param tableID 表格ID */ function GetTable(tableID) { var milasUrl = {};//新 ...
- 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动
一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...
- css固定div头部不随滚动条滚动
给div加浮动: position:fixed; 固定宽度,高度,距离头部,左部为0:width: 99%; height: 80px; top:0; left: 0;
- pc页面滚动的时候,背景图不动只是页面滚动
代码如下,直接拷贝出去就能看效果: 用到的方法 background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动. <!DOCTYPE html> <h ...
- 容器,表格 ,div,元素可左右拖动,滚动 css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了
APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了 彻底理解android中的内部存储与外部存储 存储在内部还是外部 所有的Android设备均有两个文件存储区域:"intern ...
- KVO内部实现原理
KVO的原理: 只要给一个对象注册一个监听, 那么在运行时, 系统就会自动给该对象生成一个子类对象, (格式如:NSKVONotifying_className), 并且重写自动生成的子类对象的被监听 ...
- 数据结构之二分查找(PHP)
<?php //二分查找算法 //前提:索引数组.数组已排好顺序 $a=array(1,3,4,6,8,9,11,13,15,24,25,27,30,38); $search = 30;//要查 ...
- (String)、toString、String.valueOf的区别
String.valueOf()它可以将JAVA基本类型(int,double,boolean等)和对象(Object)转换成String型toString()是对象的方法,它可以将该对象转换成Str ...
- Leetcode 367. Valid Perfect Square
Given a positive integer num, write a function which returns True if num is a perfect square else Fa ...
- 【poj1419】 Graph Coloring
http://poj.org/problem?id=1419 (题目链接) 题意 求一般图最大独立集. Solution 最大独立集=补图的最大团. 代码 // poj1419 #include< ...
- CruiseControl.NET与TFS结合的配置文件
配置如下: <cruisecontrol xmlns:cb="urn:ccnet.config.builder"> <project name="测试项 ...
- lbs(查看附近的人),看看社交软件如何实现查看附近的人
最近在做一款移动端棋牌游戏,为了进一步提高用户体验.拉近玩家的距离,我们决定在游戏中加入好友功能,而对于体验好友功能的玩家来说,要是玩牌的时候可以看看附近都有谁在玩牌,跟他们交流交流玩牌心得什么的无疑 ...
- EF 知识点
EntityFrameWorak知识点记录 发展史 EF1.0时,只支持Database First,数据库优先.必须将设计器指向一个现有的数据库. EF4时,支持Model First,模型优先.可 ...
- 用DOS命令打开IE浏览器、我的文档等等
用DOS命令打开IE浏览器 在“start”-运行中直接输入网址就可以了.如输入百度: http://www.baidu.com Command:[ start http://www.baidu.c ...