Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定。为了避免对代码改动太大,所以决定手写表头固定
主要遇到的个问题就是固定以后数据表格与表头的对齐问题,也看了很多我文章试下来都不怎么成功,只好自己一点点试
表头固定的一般思路是布两个table,一个放表头,一个放表格体,然后将表格体加上高度height以及overflow-y

    <div class="content">
<div class="table_head">
<table border>
<colgroup>
<col width="10%" />
<col width="10%" />
<col width="5%" />
<col width="5%"/>
<col width="5%"/>
<col width="10%"/>
<col width="10%"/>
<col width="5%"/>
<col width="10%"/>
<col width="5%"/>
<col width="10%"/>
<col width="5%"/>
<col"/>
</colgroup>
<thead>
<th>缩略图</th>
<th>标题</th>
<th>总价</th>
<th>总销量</th>
<th>周销量</th>
<th>增幅</th>
<th>商品评分</th>
<th>分配开发</th>
<th>SKU</th>
<th>商品状态</th>
<th>审核备注</th>
<th>时间</th>
<th>操作</th>
</thead>
</table>
</div>
<div class="table_body">
<table border>
<colgroup>
<col width="10%" />
<col width="10%" />
<col width="5%" />
<col width="5%"/>
<col width="5%"/>
<col width="10%"/>
<col width="10%"/>
<col width="5%"/>
<col width="10%"/>
<col width="5%"/>
<col width="10%"/>
<col width="5%"/>
<col"/>
</colgroup>
<tbody>
<tr>
<td>此处应有图片</td>
<td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
<td>0.99</td>
<td>13113</td>
<td>107</td>
<td>-21%</td>
<td>5.0</td>
<td>张乐</td>
<td>abcadawdadawdawdadad</td>
<td>开发成功</td>
<td>备注</td>
<td>上架:2016-07-02
采集:2018-06-25</td>
<td>增加</td>
</tr>
<tr>
<td>此处应有图片</td>
<td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
<td>0.99</td>
<td>13113</td>
<td>107</td>
<td>-21%</td>
<td>5.0</td>
<td>张乐</td>
<td>abcadawdadawdawdadad</td>
<td>开发成功</td>
<td>备注</td>
<td>上架:2016-07-02
采集:2018-06-25</td>
<td>增加</td>
</tr>
<tr>
<td>此处应有图片</td>
<td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
<td>0.99</td>
<td>13113</td>
<td>107</td>
<td>-21%</td>
<td>5.0</td>
<td>张乐</td>
<td>abcadawdadawdawdadad</td>
<td>开发成功</td>
<td>备注</td>
<td>上架:2016-07-02
采集:2018-06-25</td>
<td>增加</td>
</tr>
<tr>
<td>此处应有图片</td>
<td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
<td>0.99</td>
<td>13113</td>
<td>107</td>
<td>-21%</td>
<td>5.0</td>
<td>张乐</td>
<td>abcadawdadawdawdadad</td>
<td>开发成功</td>
<td>备注</td>
<td>上架:2016-07-02
采集:2018-06-25</td>
<td>增加</td>
</tr>
<tr>
<td>此处应有图片</td>
<td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
<td>0.99</td>
<td>13113</td>
<td>107</td>
<td>-21%</td>
<td>5.0</td>
<td>张乐</td>
<td>abcadawdadawdawdadad</td>
<td>开发成功</td>
<td>备注</td>
<td>上架:2016-07-02
采集:2018-06-25</td>
<td>增加</td>
</tr>
</tbody>
</table>
</div>

两个table定义的不一致也就导致了表头与表格的不对齐,这里需要使用<colgroup>将两个表格的列宽定义一致

   <colgroup>
<col width="10%" />
<col width="10%" />
<col width="5%" />
<col width="5%"/>
<col width="5%"/>
<col width="10%"/>
<col width="10%"/>
<col width="5%"/>
<col width="10%"/>
<col width="5%"/>
<col width="10%"/>
<col width="5%"/>
<col"/>
</colgroup>

在两个table标签下都定义一下相同的<colgroup>,注意列数与表格列数相同,最后一列可以不要定义固定的宽

可以看出来还是没有对齐,这里有两个问题,一是:表体加上滚动条后会占约17px的宽度,第二个是表格的列宽table-layout默认取值automatic是随单元格内容撑起来的,所以要对这两个做调整。我的方法是给表头加一个padding_right:17px;两个table都设定为table-layout:fixed
css代码

        .content{
width: 80%;
}
table {
width: 100%;
border-collapse : collapse;
border:1px solid #ccc;
color:#4c4c4c;
}
th,td{
padding:5px;
}
.table_body{
height:312px;
overflow-y: scroll;
}
.table_head{
padding-right: 17px;
}
.table_body table,.table_head table{
table-layout: fixed;
}

这样就完美对齐了,适合任意屏幕宽度

有几个需要注意的地方我的两个表格都使用div包裹起来,主要是由于表格display:table属性导致padding,overflow等属性很难设置上去,因此可以设置到外包裹的div上,毕竟table布局水真的深,一时还不敢碰

css手写一个表头固定的更多相关文章

  1. 一个常见下拉菜单的样式:一体化小三角(纯css手写解决)

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

  2. 放弃antd table,基于React手写一个虚拟滚动的表格

    缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...

  3. 教你如何使用Java手写一个基于链表的队列

    在上一篇博客[教你如何使用Java手写一个基于数组的队列]中已经介绍了队列,以及Java语言中对队列的实现,对队列不是很了解的可以我上一篇文章.那么,现在就直接进入主题吧. 这篇博客主要讲解的是如何使 ...

  4. 看年薪50W的架构师如何手写一个SpringMVC框架

    前言 做 Java Web 开发的你,一定听说过SpringMVC的大名,作为现在运用最广泛的Java框架,它到目前为止依然保持着强大的活力和广泛的用户群. 本文介绍如何用eclipse一步一步搭建S ...

  5. 手写一个最迷你的Web服务器

    今天我们就仿照Tomcat服务器来手写一个最简单最迷你版的web服务器,仅供学习交流. 1. 在你windows系统盘的F盘下,创建一个文件夹webroot,用来存放前端代码.  2. 代码介绍: ( ...

  6. 『练手』手写一个独立Json算法 JsonHelper

    背景: > 一直使用 Newtonsoft.Json.dll 也算挺稳定的. > 但这个框架也挺闹心的: > 1.影响编译失败:https://www.cnblogs.com/zih ...

  7. 【spring】-- 手写一个最简单的IOC框架

    1.什么是springIOC IOC就是把每一个bean(实体类)与bean(实体了)之间的关系交给第三方容器进行管理. 如果我们手写一个最最简单的IOC,最终效果是怎样呢? xml配置: <b ...

  8. 只会用就out了,手写一个符合规范的Promise

    Promise是什么 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Prom ...

  9. 搞定redis面试--Redis的过期策略?手写一个LRU?

    1 面试题 Redis的过期策略都有哪些?内存淘汰机制都有哪些?手写一下LRU代码实现? 2 考点分析 1)我往redis里写的数据怎么没了? 我们生产环境的redis怎么经常会丢掉一些数据?写进去了 ...

随机推荐

  1. CodeForces 91B Queue (线段树,区间最值)

    http://codeforces.com/problemset/problem/91/B B. Queue time limit per test: 2 seconds memory limit p ...

  2. Lamda过滤替换List元素的属性值

    import java.util.ArrayList;import java.util.HashMap;import java.util.Iterator;import java.util.List; ...

  3. 吴裕雄--天生自然C语言开发:数据类型

    #include <stdio.h> #include <limits.h> int main() { printf("int 存储大小 : %lu \n" ...

  4. Flask的Jinja2模版过滤器

    Jinja2模版过滤器 过滤器是通过管道符号(|)进行使用的,例如:{{ name|length }},将返回name的长度.过滤器相当于是一个函数,把当前的变量传入到过滤器中,然后过滤器根据自己的功 ...

  5. freeswitch的internal的profile无法启动

    服务器断电重启后,导致freeswitch的internal的profile无法启动 在fs_cli执行 sofia profile internal restart 打印如下信息: [ERR] sw ...

  6. 吴裕雄--天生自然 PHP开发学习:在CenterOS 7 系统安装配置PHP 7

    执行命令"yum install httpd"进行安装,然后在选择处,我们输入y,等待软件安装完毕.安装完成后,Apache配置文件路径是:/etc/httpd/conf/http ...

  7. cs231n spring 2017 lecture9 CNN Architectures

    参考<deeplearning.ai 卷积神经网络 Week 2 听课笔记>. 1. AlexNet(Krizhevsky et al. 2012),8层网络. 学会计算每一层的输出的sh ...

  8. java 内存溢出-与gc

    感谢原作者 在日常中我们经常遇到这样的错误:java.lang.OutOfMemoryError: Java heap space. 但是除了heap space 的OutOfMemoryError, ...

  9. DB2数据库多行一列转换成 一行一列

    在db2中遇到多行一列转为一行一列的需求时,用db2函数 LISTAGG可以实现该功能.语法如下: SELECT   [分组的字段 ] , LISTAGG([需要聚合的字段名], ',')   FRO ...

  10. 史无前例的KDD 2014大会记

    2014大会记" title="史无前例的KDD 2014大会记"> 作者:蒋朦 微软亚洲研究院实习生 创造多项纪录的KDD 2014 ACM SIGKDD 国际会 ...