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实现Material Design效果
Mar 09 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
css3 filter属性的使用简介
Mar 31 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
php微信公众号开发模式详解
2016/11/28 PHP
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
Js apply方法详解
2017/02/16 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python入门篇之字符串
2014/10/17 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
给校长的建议书
2014/03/12 职场文书
战友聚会主持词
2014/04/02 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技