css固定表头,表单内容可以滑动
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
<style type="text/css">
.table{
width: 100%;
border-collapse:collapse;
border-spacing:0;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
.fixedThead{
width: calc( 100% - 1em )
}
.scrollTbody{
display: block;
height: 262px;
overflow: auto;
width: 100%;
overflow-y:scroll;
}
.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-left: 1px solid #EB8;
border-bottom: 1px solid #B74;
}
/*thead.fixedThead tr th:last-child {
color:#FF0000;
width: 218px;
}*/
</style>
</head>
<body >
<table class="table">
<thead class="fixedThead">
<tr><th>header</th><th>header two</th></tr>
</thead>
<tbody class="scrollTbody">
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
</tbody>
</table>
</body>
</html>
css固定表头,表单内容可以滑动的更多相关文章
- js控制select选中显示不同表单内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- c#程序为PDF文件填写表单内容
众所周知,PDF文件一般情况下是无法修改的,如果你有一张现成的PDF表格,这时想通过编程实现从数据库或者动态生成内容去填写这张表格,就会有些问题了,首先我们要解决以下2个重要的问题: 1.如何将内容写 ...
- Django--post提交表单内容
本节目标:①.提交表单内容②.通过客户端提交表单新增一篇文章③.通过Django的forms组件来完成新增一篇文章 =======提交表单内容======== 1.前端html:login.html ...
- 分页功能实现之通过ajax实现表单内容刷新
拿代码来说话 我们的需求就是点击翻页功能,实现表格内容局部刷新且能够翻到对应的页面上,不明白? 那么就看看下面的图,需要达到的效果如下所示: 现在要实现的功能就是把红线框起来的表单内容 在点击翻页的时 ...
- HTTP上下文表单内容转为实体对象
using ServiceStack.Web; using System; using System.Collections.Generic; using System.Linq; using Sys ...
- c#使用itextsharp输出pdf(动态填充表单内容,显示中文)
相关链接: iText的简单应用-字体 c#程序为PDF文件填写表单内容 示例代码: static void Main(string[] args) { BaseFont font = BaseFon ...
- 清除input表单内容
碰到几次情况,页面刷新或者从上级页面返回表单的内容依然遗留,很影响使用. <form action="" method="" autocomplete=& ...
- css表格表头表尾固定,表身滚动
表头表尾固定,表身滚动实现用了3个table标签 <!DOCTYPE html> <html> <head> <meta http-equiv="C ...
- 如何写好CSS系列之表单(form)
表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置:二是表单元素,如:输入框.单选.复选.列表组件.搜索组件等,由于列表组件.搜索组件不是单纯的css组件,所以暂且没有实现. 一 ...
随机推荐
- 最小生成树入门(克鲁斯卡尔+普利姆 hdu1233)
克鲁斯卡尔 #include <set> #include <map> #include <queue> #include <stack> #inclu ...
- webpack指定第三方模块的查找路径
通常我们会使用一些地方模块在我们的项目中,比如bootstrap import 'bootstrap' 导入的bootstrap默认会查找当前目录的node_modules文件,但是如果这个文件没有, ...
- Luogu P4859「已经没有什么好害怕的了」
以前开过一遍这题,以为很难没刚下去 今天$ review$一遍分析了一下感觉也还好 luogu 4859 题意:给定长度为$ n \leq 2000$的数组$ A,B$求完全匹配使得$A>B$的 ...
- shiro 启动异常
原因是:LoginController中用到,自动注入,要配置在 /permission1110/config/spring/applicationContext-service.xml中配置bean ...
- P4553 80人环游世界
题目地址:P4553 80人环游世界 上下界网络流 无源汇上下界可行流 给定 \(n\) 个点, \(m\) 条边的网络,求一个可行解,使得边 \((u,v)\) 的流量介于 \([B(u,v),C( ...
- Mysqli扩展类
Mysqli 扩展是需要php5.0版本以上的支持 主要有以下的3个类 MySQLi类,基本操作 MySQL_STMT类,预处理操作 MySQLi_RESULT类,结果操作 Mysqli的编写有两种方 ...
- LwIP Application Developers Manual9---LwIP and multithreading
1.前言 lwIP的内核并不是线程安全的.如果我们必须在多线程环境里使用lwIP,那么我们必须使用“upper”API层的函数(netconn或sockets).当使用raw API时,你需要自己保护 ...
- dubbo源码分析7——dubbo的配置解析_与spring的整合
dubbo的配置其实就是建立在spring的命名空间的配置机制之上的.在dubbo的jar包的META-INF目录下会有spring.handlers这个文件,用来配置spring的命名空间和解析类的 ...
- python3+selenium入门03-操作谷歌浏览器
操作谷歌浏览器同样也需要下载相应的driver插件,官网下载.也可以从我的网盘下载,不过可能不是最新的,网盘地址.打开谷歌浏览器的操作和火狐的差不过. from selenium import web ...
- 题解-Codeforces710F String Set Queries
咕了好久没更博客,最近得知可以去冬眠营玩耍,还可以搭顺风车回广州过年 (最近做到的比较有意思的题目:bzoj3958.hihocoder1419) Problem Codeforces-710F--洛 ...