Table标题行冻结,数据行滚动的一种方式
这段时间在做Table标题行冻结,数据行滚动,虽然能实现,但也遇到一些问题,记录下来。
首先说说实现,实现其实不难,估计很多人都能想象出来,那就是标题行与内容行分离。我是这么做的,用两个表格,一个只有thead,一个只有tbody,两个表格的列数量是完全相等的,而且相同的列宽度完全相等。这样两个表格合并在一起的时候,就感觉是一个表格一样。
但问题来了,就是当滚动条的时候,滚动条会占掉一部分宽度,导致数据表的总宽变小,从而导致数据表每个单元格的宽度被不同程度挤压,这样,表头与数据的边框就无法对齐了。
解决办法是,在外层套一个DIV,overflow用hidden,然后把数据表的宽度设置为calc(100% + 16px),这样,就把滚动条推到右边去隐藏掉,从而表格单元格也正常了。
Table标题行冻结,数据行滚动的一种方式的更多相关文章
- 第1节 IMPALA:10、基本查询语法;11、数据加载的4种方式
9.3. 创建数据库表 创建student表 CREATE TABLE IF NOT EXISTS mydb1.student (name STRING, age INT, contact INT ) ...
- html中table表格标题固定表数据行出现滚动条
需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
- Hive数据导入导出的几种方式
一,Hive数据导入的几种方式 首先列出讲述下面几种导入方式的数据和hive表. 导入: 本地文件导入到Hive表: Hive表导入到Hive表; HDFS文件导入到Hive表; 创建表的过程中从其他 ...
- mysql导出数据到excel的两种方式
使用第一种方式如果数据中有换行符的话会自动换行,但使用第二种方式就不会出现这种效果了.两种方式自己选择哈 1:select * from into outfile 'c:/Users/a.xls' t ...
- Hive数据导入导出的n种方式
Tutorial-LoadingData Hive加载数据的6种方式 #格式 load data [local] inpath '/op/datas/xxx.txt' [overwrite] into ...
- hive 分区表与数据产生关联的三种方式
所谓关联,可以理解为能够使用select查询到 1.load 这是最常用的一种方式 load data [local] inpath "数据路径" into table table ...
- C#中POST数据和接收的几种方式(抛砖引玉)
POST方式提交数据,一种众所周知的方式: html页面中使用form表单提交,接收方式,使用Request.Form[""]或Request.QueryString[" ...
- [转]C#中POST数据和接收的几种方式
POST方式提交数据,一种众所周知的方式: html页面中使用form表单提交,接收方式,使用Request.Form[""]或Request.QueryString[" ...
- Android发送数据到web服务器4种方式
1./** 2. * Android中向web服务器提交数据的两种方式四种方法 3. */ 4.public class SubmitDataByHttpClientAndOrdinaryWay { ...
随机推荐
- Android GIS开发系列-- 入门季(14)FeatureLayer之范围查询
Android GIS开发系列-- 入门季(5),这篇文章中,我们知道如何去查找要素.现在有一个需求,查找某点5000米范围的要素,那如何来做呢?首先我们需要在地图上画个5000米半径的圆,然后根据Q ...
- windows安装docker
主要參考:http://docs.docker.com/installation/windows/ [1]安装完毕后同意后可能会报错: error in run: Failed to start ma ...
- Python进阶系列之怎么写出pythonic的代码
使用 in/not in 检查key是否存在于字典中 判断某个key是否存在于字典中时,一般的初学者想到的方法是,先以列表的形式把字典所有的key返回,在判断该key是否存在于key列表中 d = { ...
- 011 router backup
Router>en Router#config t Enter configuration commands, one per line. End with CNTL/Z. Router(co ...
- 【C++/数据结构】单链表的基本操作
#pragma once #ifndef _CLIST_H_ #define _CLIST_H_ #include <iostream> #include <assert.h> ...
- linux一些硬件详情查看的高级方法(网卡,内存,硬盘,cpu)
网卡-lspci内存大小和个数—— dmidecode|grep -A16 "Memory Device$"查看硬盘型号——smartctl -a /dev/sda查看硬盘大小—— ...
- python模块之 paramiko(转载)
paramiko模块提供了ssh及sft进行远程登录服务器执行命令和上传下载文件的功能.这是一个第三方的软件包,使用之前需要安装. 1 基于用户名和密码的 sshclient 方式登录 # 建立一个s ...
- PHP在浏览器上跟踪调试的方法以及使用ChromePhp、FirePHP的简介
之前用ThinkPHP时发现有个 trace 函数能够跟踪调试,感觉非常有意思.网上搜索了下类似的东西.发现了 ChromePhp ,曾经没想过这样来调试 PHP 程序.感觉非常方便,非常实用. Th ...
- session 生命周期
以前看到书上session 的生命周期,知道session的生命周期是在第一次访(即打开浏览器输入地址成功访问)的时候被创建.同时HttpSessionListener接口的sessionCreate ...
- 预载入和javascript对象
请参见 http://www.west263.com/info/html/wangyezhizuo/Javascript/20080225/34168.html