css手写一个表头固定
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手写一个表头固定的更多相关文章
- 一个常见下拉菜单的样式:一体化小三角(纯css手写解决)
类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...
- 放弃antd table,基于React手写一个虚拟滚动的表格
缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...
- 教你如何使用Java手写一个基于链表的队列
在上一篇博客[教你如何使用Java手写一个基于数组的队列]中已经介绍了队列,以及Java语言中对队列的实现,对队列不是很了解的可以我上一篇文章.那么,现在就直接进入主题吧. 这篇博客主要讲解的是如何使 ...
- 看年薪50W的架构师如何手写一个SpringMVC框架
前言 做 Java Web 开发的你,一定听说过SpringMVC的大名,作为现在运用最广泛的Java框架,它到目前为止依然保持着强大的活力和广泛的用户群. 本文介绍如何用eclipse一步一步搭建S ...
- 手写一个最迷你的Web服务器
今天我们就仿照Tomcat服务器来手写一个最简单最迷你版的web服务器,仅供学习交流. 1. 在你windows系统盘的F盘下,创建一个文件夹webroot,用来存放前端代码. 2. 代码介绍: ( ...
- 『练手』手写一个独立Json算法 JsonHelper
背景: > 一直使用 Newtonsoft.Json.dll 也算挺稳定的. > 但这个框架也挺闹心的: > 1.影响编译失败:https://www.cnblogs.com/zih ...
- 【spring】-- 手写一个最简单的IOC框架
1.什么是springIOC IOC就是把每一个bean(实体类)与bean(实体了)之间的关系交给第三方容器进行管理. 如果我们手写一个最最简单的IOC,最终效果是怎样呢? xml配置: <b ...
- 只会用就out了,手写一个符合规范的Promise
Promise是什么 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Prom ...
- 搞定redis面试--Redis的过期策略?手写一个LRU?
1 面试题 Redis的过期策略都有哪些?内存淘汰机制都有哪些?手写一下LRU代码实现? 2 考点分析 1)我往redis里写的数据怎么没了? 我们生产环境的redis怎么经常会丢掉一些数据?写进去了 ...
随机推荐
- 十八、linux系统分区
一.磁盘存储结构图:这里注意下,分区标有64字节,则每个分区有16字节,MBR引导分区有446字节,共有510字节,一个扇区有512字节,还有俩个字节是分区结束标识.比如隐藏文件等标识,都是这2个字节 ...
- day47-线程-锁和死锁
#1.锁:防止多个线程同时读写某一块内存区域. from threading import Thread from threading import Lock def func(): global n ...
- day14-单继承
#面向对象的三大特征:继承.多态.封装. #一.单继承: # 1. class Animal: #没有父类,默认继承了顶级父类object类. def __init__(self,name,aggr, ...
- day07-生成器
一. 含有yield关键字的函数就是生成器函数. yield不能和return公用,且要写在函数内部. 调用生成器函数之后,函数不执行,返回一个生成器. 生成器的本质是迭代器.生成器generator ...
- supervisor安装与配置实践版
应用场景 系统:centos7 需求:监控一个swooleWebSocket.php文件,程序使用的是8080端口,挂了自动被supervisor拉起来 一.首先要安装supervisor软件 yum ...
- 使用iframe的好处与坏处详细比拼
一.使用iframe的坏处 1.搜索引擎的蜘蛛不会识别在iframe中被调用的图片.文本.url等内容的,因为该内容不属于该页面,只是访问的时候被临时的调用,而且在SEO建议中也有提到:"f ...
- 三步教你实现MyEclipse的debug远程调试
MyEclipse远程调试程序是个神奇的东西,有时一个项目本地运行没问题可放到服务器上,同样的条件就是结果不一样:有时服务器上工程出点问题需要远程调测.于是就灰常想看一下程序在远程运行时候的状态,希望 ...
- 性能分析之工具使用——cpu、io 、mem【工具分析】
nmon nmon 是一种在aix 与各种 Linux 操作系统上广泛使 用的监控与与分析工具,他主要记录以下内容: • cpu 占用率 • 内存使用情况 • 磁盘I/O 速度.传输和读写比率 • 文 ...
- SpringMVC学习笔记四:SimpleMappingExceptionResolver异常处理
SpringMVC的异常处理,SimpleMappingExceptionResolver只能简单的处理异常 当发生异常的时候,根据发生的异常类型跳转到指定的页面来显示异常信息 ExceptionCo ...
- 模型压缩之Channel Pruning
论文地址 channel pruning是指给定一个CNN模型,去掉卷积层的某几个输入channel以及相应的卷积核, 并最小化裁剪channel后与原始输出的误差. 可以分两步来解决: channe ...