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 3D位移translate效果实例介绍
May 03 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
基于CSS3画一个iPhone
Apr 21 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
十天学会php之第二天
2006/10/09 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
用js重建星际争霸
2006/12/22 Javascript
javascript window对象属性整理
2009/10/24 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
在Python的Django框架中编写错误提示页面
2015/07/22 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
python实现图片上添加图片
2019/11/26 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
StringBuilder和String的区别
2015/05/18 面试题
高级电工工作职责
2013/11/21 职场文书
理财投资建议书
2014/03/12 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
python 自动化偷懒的四个实用操作
2021/04/11 Python