HTML Table锁定表头(CSS实现)
来源:互联网 发布:淘宝官方自营店是什么 编辑:程序博客网 时间:2024/05/18 17:24
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>css+html实现固定表头</title><style type="text/css"> #scrollTable { width:701px; border: 1px solid #EB8;/*table没有外围的border,只有内部的td或th有border*/ background: #FF8C00; } #scrollTable table { border-collapse:collapse; /*统一设置两个table为细线表格*/ } /*表头 div的第一个子元素**/ #scrollTable table.thead{ width:100%; } /*表头*/ #scrollTable table.thead th{ border: 1px solid #EB8; border-right:#C96; color:#fff; background: #FF8C00;/*亮桔黄色*/ } /*能带滚动条的表身*/ /*div的第二个子元素*/ #scrollTable div{ width:100%; height:200px; overflow:auto;/*必需*/ scrollbar-face-color:#EB8;/*那三个小矩形的背景色*/ scrollbar-base-color:#ece9d8;/*那三个小矩形的前景色*/ scrollbar-arrow-color:#FF8C00;/*上下按钮里三角箭头的颜色*/ scrollbar-track-color:#ece9d8;/*滚动条的那个活动块所在的矩形的背景色*/ scrollbar-highlight-color:#800040;/*那三个小矩形左上padding的颜色*/ scrollbar-shadow-color:#800040;/*那三个小矩形右下padding的颜色*/ scrollbar-3dlight-color: #EB8;/*那三个小矩形左上border的颜色*/ scrollbar-darkshadow-Color:#EB8;/*那三个小矩形右下border的颜色*/ } /*能带滚动条的表身的正体*/ #scrollTable table.tbody{ width:100%; border: 1px solid #C96; border-right:#B74; color:#666666; background: #ECE9D8; } /*能带滚动条的表身的格子*/ #scrollTable table.tbody td{ border:1px solid #C96; }</style></head><body><div id="scrollTable"> <table class="thead"> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col></col> <tbody> <tr> <th>名称</th> <th>语法</th> <th>说明</th> <th>例子</th> </tr> </tbody> </table> <div> <table class="tbody"> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> </div></div></body></html>转自:http://blog.csdn.net/muyi8805/article/details/46868529
阅读全文
0 0
- HTML Table锁定表头(CSS实现)
- css实现table锁定表头
- CSS 锁定TABLE表头
- css+html实现横纵表头锁定的表格
- html table css 实现固定表头的办法
- HTML/CSS实现<table>表头固定、表体滚动
- css 实现 table斜线表头
- html Table实现表头固定
- html Table实现表头固定
- table表头列头固定(css实现)
- 通过js在web实现Table的表头锁定
- js、css实现table表头固定
- 纯css实现table表头固定
- HTML中单击Table表头实现排序
- html固定table表头的实现思路
- js锁定Table多表头
- jquery实现表头锁定
- div+css编写html的table表头斜线
- 【笔记】利用ajax返回Html代替iframe,实现局部更新
- 9、外观模式(Facade)
- AAC规格(LC,HE,HEv2)及性能对比
- 使用baidu的api完成汉译英功能
- 10、桥接模式(Bridge)
- HTML Table锁定表头(CSS实现)
- 11、组合模式(Composite)
- CSS: 潜藏着的BFC
- bzoj3585mex
- 主页的制作
- android 获取apk的版本信息
- SDP协议小结
- Laravel 文件上传方法
- Java基础 file IO