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组件,所以暂且没有实现. 一 ...
随机推荐
- 第20月第17天 mvvm 多次点击push -ObjC
1. 响应式库EasyReact建成后,为了能使其得到更好的利用,更好地降低使用的理解和学习成本,臧成威老师又带领团队开发了基于响应式的MVVM框架:EasyMVVM. https://www.jia ...
- Log4j日志根据配置输出到多个自定义文件
最近工作中遇到所有日志需要记录到一个文件,而错误的sql执行记录到另一个文件中,查询了一些资料搞定,记录下来.顺便吐槽下公司限制印象笔记的使用. ##log4j.rootLogger=INFO, CO ...
- vim7.4+python3配置
基本参考:https://blog.csdn.net/qq_26877377/article/details/80717755 注意几点: (1)关于python的自动补全,不要使用pydiction ...
- Excel自动建组
已用于测试用例自动创建组 使用要求:A列的格式如:X.X.X.X.X11.11.1.11.1.1.11.1.1.1.11.1.1.21.1.21.22 会自动将1.1.1.1.1-1.1.1.1.X组 ...
- LwIP Application Developers Manual1---介绍
1.前言 本文主要是对LwIP Application Developers Manual的翻译 2.读者(应用开发手册的读者) 谁适合读这份手册 网络应用的开发者 想了解lwIP的网络应用开发者 阅 ...
- python3+selenium入门13-操作cookie
可以把cookie理解为自己账户的身份证.因为http协议是无状态的,上一个请求和下一个请求没有关系.但是有时需要有关联.比如登录之后,才能进行操作这样的设置.这个就是cookie在起作用.登录成功时 ...
- U3D虚拟摇杆制作
来自https://www.cnblogs.com/jiuxuan/p/7453762.html 1.创建两个Image,修改第一个Image名称为 Background,把第二个Image放入 Ba ...
- $Django RESTful规范
一 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角度 ...
- (常用)configparser,hashlib,hamc模块
configparser模块 #专门解析my.ini这种形式的文件(cnf) import configparser config=configparser.ConfigParser() conf ...
- mysql修改字段长度及pymysql.err.DataError: (1406, "Data too long for column 'name' at row 1")错误
文章链接:修改字段:https://blog.csdn.net/xiejunna/article/details/78580682 错误分析:https://blog.csdn.net/qq_4214 ...