html Table 表头固定的实现


Posted in HTML / CSS onJanuary 22, 2019

本文介绍了html Table 表头固定的实现,分享给大家,具体如下:

<div class="wrapbox">
     <div class="table-head">
        <table>
            <thead>
                <th width="10%">合同号</th>
                <th width="30%">签约客户</th>
                <th width="20%">发布客户</th>
                <th width="10%">合同状态</th>
                <th width="30%">选定条件的发布周期额度</th>
            </thead>
        </table>
    </div>
    <div class="table-body">
        <table>
            <tbody id="tbody">
            </tbody>
        </table>
    </div>
</div>

看看css

*{
        padding:0;
        margin:0;
    }
    th{
        border:1px solid #e6e6e6;
        line-height: 5vh;
        color:#666666;
        font-size: 16px;
    }
    table {
        border-collapse: collapse;
        width: 100%;
    }
    td {
         padding:5px;
         border:1px solid #e6e6e6;
         font-size: 14px;
    }
    .table-head{padding-right:17px;background-color:rgb(207, 231, 179);color:#000;height:5vh;}
    .table-body{width:100%; height:94vh;overflow-y:scroll;}
    .table-head table,.table-body table{width:100%;}
    .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}

    .table-body table tr:hover {
        background-color:rgb(240, 249, 228);
        transition: .2s;
    }

点击看效果

其实关键之处在于

1、使用了colgroup标签,来对上下两个表格的列宽进行了定义,让他们保持一致。

2、上边的div .table-head添加了样式padding-right:17px,这个宽度是为了保证跟下边的div .table-body的滚动条保持一致,同时下边的表格.table-body添加了样式overflow-y:scroll;

只要保证上述两点的话,你也可以做出固定表头的表格来,同时不会发生上下的列不对齐的问题,屡试不爽!

html Table 表头固定的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 #HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 #HTML / CSS
web页面录屏实现
Feb 12 #HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 #HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 #HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 #HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 #HTML / CSS
You might like
PHP中GET变量的使用
2006/10/09 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
php实现的xml操作类
2016/01/15 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python之PyMongo使用总结
2017/05/26 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
试用期转正鉴定评语
2014/01/27 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
品牌宣传方案
2014/03/21 职场文书
维修工先进事迹
2014/05/29 职场文书
2014司机年终工作总结
2014/12/05 职场文书
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL