<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. easyui 进阶之表单校验、自定义校验

    前言 easyui是一种基于jQuery的用户界面插件集合,它为创建现代化,互动,JavaScript应用程序,提供必要的功能,完美支持HTML5网页的完整框架,节省网页开发的时间和规模.非常的简单易 ...

  2. 【vue】中 $listeners 的使用方法

    $listeners 的官方介绍: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器.它可以通过 v-on="$listeners" 传入内部组件——在 ...

  3. ES6走一波 Iterator

    Iterator---> for ... of 循环 Generator函数原生具有 Iterator接口,所以可采用数组的形式解构赋值

  4. Linux命令之-ps & kill

    1.ps:将某个进程显示出来: 常用命令 :ps -ef |grep Java 1)如下为加不加-e参数的区别 2.一般我们查找某个进程的目的就是把它杀掉,使用kill 命令. kill -9 564 ...

  5. Jedis（java操作redis数据库技术）

    Redis有什么命令,Jedis就有什么方法. 客户端无法连接时,需要考虑防火墙配置,比如6379端口是否开放,也可以直接关闭防火墙. Jedis连接池: import org.junit.Test; ...

  6. SpringBoot--配置详解

    SpringBoot使用了一个全局的配置文件application.properties,放在src/mian/resource目录下或者类路径的/config下.springboot的全局配置文件的 ...

  7. elasticsearch入门笔记

    安装 注意:elasticsearch需要非ROOT用户启动 https://es.xiaoleilu.com/010_Intro/10_Installing_ES.html 下载elasticsea ...

  8. Java异常处理之try-with-resources

    Oracle官方文档: http://docs.oracle.com/javase/7/docs/technotes/guides/language/try-with-resources.html 概 ...

  9. ARMV7-M数据手册---Part A ：Application Level Architecture---A1 Introduction

    1.前言 本章主要介绍了ARMV7体系结构及其定义的属性,以及本手册定义的ARMV7M属性. 主要包括: ARMV7体系结构和属性 ARMV7M属性 ARMV7M扩展 2. ARMV7体系结构和属性 ...

  10. Linux 应用层的时间编程【转】

    转自:https://blog.csdn.net/chinalj2009/article/details/21223681 浅析 Linux 中的时间编程和实现原理,第 1 部分: Linux 应用层 ...