<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固定表头，表单内容可以滑动的更多相关文章

  1. js控制select选中显示不同表单内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. c#程序为PDF文件填写表单内容

    众所周知,PDF文件一般情况下是无法修改的,如果你有一张现成的PDF表格,这时想通过编程实现从数据库或者动态生成内容去填写这张表格,就会有些问题了,首先我们要解决以下2个重要的问题: 1.如何将内容写 ...

  3. Django--post提交表单内容

    本节目标:①.提交表单内容②.通过客户端提交表单新增一篇文章③.通过Django的forms组件来完成新增一篇文章 =======提交表单内容======== 1.前端html:login.html ...

  4. 分页功能实现之通过ajax实现表单内容刷新

    拿代码来说话 我们的需求就是点击翻页功能,实现表格内容局部刷新且能够翻到对应的页面上,不明白? 那么就看看下面的图,需要达到的效果如下所示: 现在要实现的功能就是把红线框起来的表单内容 在点击翻页的时 ...

  5. HTTP上下文表单内容转为实体对象

    using ServiceStack.Web; using System; using System.Collections.Generic; using System.Linq; using Sys ...

  6. c#使用itextsharp输出pdf(动态填充表单内容,显示中文)

    相关链接: iText的简单应用-字体 c#程序为PDF文件填写表单内容 示例代码: static void Main(string[] args) { BaseFont font = BaseFon ...

  7. 清除input表单内容

    碰到几次情况,页面刷新或者从上级页面返回表单的内容依然遗留,很影响使用. <form action="" method="" autocomplete=& ...

  8. css表格表头表尾固定，表身滚动

    表头表尾固定,表身滚动实现用了3个table标签 <!DOCTYPE html> <html> <head> <meta http-equiv="C ...

  9. 如何写好CSS系列之表单(form)

    表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置:二是表单元素,如:输入框.单选.复选.列表组件.搜索组件等,由于列表组件.搜索组件不是单纯的css组件,所以暂且没有实现. 一 ...

随机推荐

  1. 第26月第29天 ffmpeg yasm

    1. brew install automake fdk-aac git lame libass libtool libvorbis libvpx \ opus sdl shtool texi2htm ...

  2. 第19月第17天 uitextview 文本垂直居中 uiimage中间不拉伸

    1. open class VericalCenteringScrollView: UIScrollView { override open var contentOffset: CGPoint { ...

  3. flex布局下overflow失效问题

    经常我们会使用flex布局,但是flex布局常常会遇到一些不可思议的麻烦,下面介绍一下overflow遇到的麻烦 我在工作中使用了左右两栏布局 .container { display: flex; ...

  4. Ant使用指南

    ant 使用指南  参考:http://www.cnblogs.com/hoojo/archive/2013/06/14/java_ant_project_target_task_run.html 一 ...

  5. 多项式乘法(FFT)学习笔记

    ------------------------------------------本文只探讨多项式乘法(FFT)在信息学中的应用如有错误或不明欢迎指出或提问,在此不胜感激 多项式 1.系数表示法  ...

  6. netty长链接保存方案

    架构 client router server zk redis 对于router: 保存客户端和服务器对 redis clientid : serverip & port 对于server ...

  7. Subtree Minimum Query CodeForces - 893F （线段树合并+线段树动态开点）

    题目链接:https://cn.vjudge.net/problem/CodeForces-893F 题目大意:给你n个点,每一个点有权值,然后这n个点会构成一棵树,边权为1.然后有q次询问,每一次询 ...

  8. response的字节流和字符流输入的区别和问题--02-response的outputStream输出数据的问题.avi

    02-response的outputStream输出数据的问题.avi; [字节流] 用meta标签 第一段原始代码:写错: 03-response的Writer输出数据的问题.avi;[字符流输出] ...

  9. pip问题

    “ModuleNotFoundError: No module named 'pip'”的解决方法:http://www.pianshen.com/article/476461202/ pip错误 I ...

  10. python,关于这个里边的私有方法（private）、保护方法(protected)、公开方法(public)

    __foo__: 定义的是特殊方法,一般是系统定义名字 ,类似 __init__() 之类的. _foo: 以单下划线开头的表示的是 protected 类型的变量,即保护类型只能允许其本身与子类进行 ...