css实现table锁定表头

最新推荐文章于 2024-04-28 14:57:52 发布

muyi8805

最新推荐文章于 2024-04-28 14:57:52 发布

阅读量8k

点赞数

分类专栏： html 文章标签： html table

本文链接：https://blog.csdn.net/muyi8805/article/details/46868529

版权

在做项目中，碰到表格数据全部加载，不要分页，就需要锁定表头的业务。自己也上网搜了一些资料，
1.css+html实现
一般的思路就是两个table拼接，不过问题是上下表单可能对不齐
2.js实现
一般的思路是重新创建表头，表头浮动
在这里css+html实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css+html实现固定表头</title>
<style type="text/css">
    #scrollTable {
        width:701px;
        border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
        background: #FF8C00;
    }
    #scrollTable table {
        border-collapse:collapse; /*统一设置两个table为细线表格*/
    }
    /*表头 div的第一个子元素**/
    #scrollTable table.thead{
        width:100%;
    }
    /*表头*/
    #scrollTable table.thead th{
        border: 1px solid #EB8;
        border-right:#C96;
        color:#fff;
        background: #FF8C00;/*亮桔黄色*/
    }

    /*能带滚动条的表身*/
    /*div的第二个子元素*/
    #scrollTable div{
        width:100%;
        height:200px;
        overflow:auto;/*必需*/
        scrollbar-face-color:#EB8</

最低0.47元/天解锁文章

muyi8805

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css实现table锁定表头

在做项目中，碰到表格数据全部加载，不要分页，就需要锁定表头的业务。自己也上网搜了一些资料， 1.css+html实现一般的思路就是两个table拼接，不过问题是上下表单可能对不齐 2.js实现一般的思路是重新创建表头，表头浮动在这里css+html实现：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.
复制链接

扫一扫