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 ...
随机推荐
- IntelliJ IDEA 使用心得与常用快捷键
那种酸爽,根本说不出来—————————————————————————— by: Jimi没有BondJimi是谁? 就是洒家啊! 刚开始学习写Java的时候,用的eclipse,正式工作后,主 ...
- JS 弹窗到右下角
<div id="msg_win" style="display: block; top: 490px; visibility: visible; opacity: ...
- 寻找数组中的第K大的元素,多种解法以及分析
遇到了一个很简单而有意思的问题,可以看出不同的算法策略对这个问题求解的优化过程.问题:寻找数组中的第K大的元素. 最简单的想法是直接进行排序,算法复杂度是O(N*logN).这么做很明显比较低效率,因 ...
- iOS 使用AFN 进行单图和多图上传
图片上传时必要将图片进行压缩,不然会上传失败 1.单张图上传 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManag ...
- NOI WC2016滚粗记
Day-4 报到日,今年居然没有发包QAQ,中午到的,志愿者很热情,食堂吃不了(也有可能是吃不惯),空调打不热,有拖线板(好评),有wifi覆盖(虽然听说连上要看脸)(反正我是没连过,用的自己的流量) ...
- matplotlib 基础
plt.figure(2) #创建图表2 plt.figure(1) #创建图表1 ax1=plt.subplot(211) # 在上面 最近的 图表1上 创建子图1 ax2=plt.subplot( ...
- 4.Android App 优化之消除卡顿
转载:http://gold.xitu.io/post/582583328ac247004f3ab124 1, 感知卡顿 用户对卡顿的感知, 主要来源于界面的刷新. 而界面的性能主要是依赖于设备的UI ...
- Apache Mod/Filter Development
catalog . 引言 . windows下开发apache模块 . mod进阶: 接收客户端数据的 echo 模块 . mod进阶: 可配置的 echo 模块 . mod进阶: 过滤器 0. 引言 ...
- 巧妙的重载魔术方法__call()
工作半年了,感觉这半年学到的东西比大学四年学到的还要多,主要原因是心静下来了,目标也明确了,不会去整天的和游戏纠缠在一起了.大学时候其实也意识到了玩游戏会影响自己的正常学习和工作的,但是一直控制不了自 ...
- 通过oauth 认证 新浪微博 开发过程中遇到的问题
1 Android之NetworkOnMainThreadException异常 http://blog.csdn.net/mad1989/article/details/25964495 ,从Hon ...