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. Linux虚拟机添加硬盘

    任务:添加1块硬盘,并且分1个区,挂载到/bak 第一.插上硬盘 第二.分区 第三.格式化(定义:文件系统的类型)  FAT,FAT32,NTFS,ext1,ext2,ext3,ext4,.... 第 ...

  2. [HNOI2003]操作系统 优先队列用法

    题:https://www.cometoj.com/problem/1046 #include<bits/stdc++.h> using namespace std; typedef lo ...

  3. 导入import的多种形式

    参考资料:anaconda官方资料 一.module(模块) 比如fibo是个模块(.py文件),其中有fib.fib2等函数 第一种形式:import fibo 在当前的符号表中,这并不会直接进入到 ...

  4. python语法基础-文件操作-长期维护

    ###############    python-简单的文件操作  ############### # python中文件的操作 # 文件操作的基本套路 # 1,打开文件,默认是是只读方式打开文件 ...

  5. vue实现动态绑定class--多个按钮点击一个有一个

    <template> //v-for循环出来多个按钮,便于获取index         <span v-for="(item,index) in list" : ...

  6. arduino basic issue

    1.    string char Str1[15]; char Str2[8] = {'a', 'r', 'd', 'u', 'i', 'n', 'o'}; char Str3[8] = {'a', ...

  7. djangp-filter的使用

    目录 Filter定义 Filter定义 定义如下Filter类 class BookFilter(django_filters.FilterSet): name = django_filters.C ...

  8. ReactJS - 组件的生命周期

    组件的生命周期分为三个状态 Mounting: 已插入真实DOM Updateing: 正在被重新渲染 Unmounting: 已移出真实DOM React 为每个状态都提供了两种处理函数,即函数在进 ...

  9. python数据类型:Number数字

    Python Number数据类型用于存储数值 数据类型是不允许改变的,如果改变Number数据类型的值,将从新分配内存空间 整型(int):整型或整数,是正或者负整数,不带小数点 长整型(long) ...

  10. file,path,uri互相转换

    uri 转 file :File file = new File(new URI(uri.toString())); uri 转 path: Path path = Files.get(uri); f ...