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 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 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
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
checkbox选中与未选中判断示例
2014/08/04 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
生日寄语大全
2014/04/08 职场文书
赔偿协议书范本
2014/04/15 职场文书
九一八事变演讲稿
2014/09/05 职场文书
教学质量月活动总结
2015/05/11 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
职工培训工作总结
2015/08/10 职场文书