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. Hibernate工程的手动创建

    1.打开MyEclipse软件,新建Java项目,如HibernateReview: 2.导入Hibernate所需的jar包: 右键build path选择configurate build pat ...

  2. JSP和EL和JSTL

    什么是JSP Java Server Page的缩写从用户角度看待,就是一个网页从程序员角度看待,其实是一个java类,它继承了Servlet,所以可以直接说jsp就是一个Servlet 为什么会有J ...

  3. [LC] 285. Inorder Successor in BST

    Given a binary search tree and a node in it, find the in-order successor of that node in the BST. Th ...

  4. GlobalExceptionHandler @ControllerAdvice

    package org.linlinjava.litemall.core.config; import org.apache.commons.logging.Log; import org.apach ...

  5. idea生成serialVersionUID

    默认情况下Intellij IDEA不会提示继承了Serializable接口的类生成serialVersionUID的警告.如果需要生成serialVersionUID,就要在Preferences ...

  6. wareshark判断一个http请求链接是否断开

    使用curl -v www.baidu.com发送一个请求 使用wareshark的过滤器表达式显示这个完整请求 TCP HTTP协议 , 其中192.168.1.4是本地ip 可以看到84 85两个 ...

  7. [LC] 13. Roman to Integer

    Roman numerals are represented by seven different symbols: I, V, X, L, C, Dand M. Symbol Value I 1 V ...

  8. Tomcat远程调试模式及利用Eclipse远程链接调试

    1.启动tomcat到调试模式 进入到tomcat的bin目录下,执行命令./catalina.sh jpda run 启动日记会提示打开调试端口默认为8000 2.调试Eclipse远程连接tomc ...

  9. Angular开发者指南(七)依赖注入

    依赖注入 依赖注入(DI)是一种软件设计模式,处理组件如何获取其依赖关系. AngularJS注入器子系统负责创建组件,解析它们的依赖关系,并根据请求将它们提供给其他组件. 使用依赖注入 DI遍布An ...

  10. Mysql————基本sql语句

    mysql中的基本语法有四种: 1.DDL语句:(用CREAT和DROP操作的语句) 用于创建.修改.和删除数据库内的数据结构,如:1:创建和删除数据库(CREATE DATABASE || DROP ...