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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
css filter和getUserMedia的联合使用
Feb 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
简单的PHP留言本实例代码
2010/05/09 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
python实现批量监控网站
2016/09/09 Python
Python中的元组介绍
2019/01/28 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
家佳咖啡店创业计划书
2013/12/27 职场文书
老师给学生的表扬信
2014/01/17 职场文书
村庄绿化方案
2014/05/07 职场文书
高中学生自我评价范文
2014/09/23 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
中班教师个人总结
2015/02/05 职场文书
员工担保书范本
2015/09/22 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
如何解决php-fpm启动不了问题
2021/11/17 PHP
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL