纯CSS细线伪表格

最新推荐文章于 2023-04-19 15:51:12 发布

weixin_34233421

最新推荐文章于 2023-04-19 15:51:12 发布

阅读量93

点赞数

不推荐用div、span去替代table，我这里情况复杂，被搞得没办法才出这晕招。

第1个格子第2个格子第3个格子第4个格子第5个格子第1个格子第2个格子第3个格子第4个格子第5个格子第1个格子第2个格子第3个格子第4个格子第5个格子第1个格子第2个格子第3个格子第4个格子第5个格子第1个格子第2个格子第3个格子第4个格子第5个格子


            .fake_table {
                position: relative;
                width:500px;
                height:100px;
                border-top:1px solid #afe0ea;
                border-left:1px solid #afe0ea;
                background: #daf5ff;
                overflow: hidden;
            }
            .fake_tbody {
                position: absolute;
                top:0px;
                left:0px;
                width:500px;
                height:100px;
            }
            .fake_tr {
                display:block;
                position: relative;
                text-decoration: none;
                height:20px;
            }

            .fake_tr:hover {
                background: #ffe499;
            }
            .fake_tr:hover span{
                color:#666;
            }
            .fake_td{
                position: absolute;
                display:inline-block;
                width:99px;
                height:19px;
                line-height: 19px;
                color:#000;
                border-bottom: 1px solid #afe0ea;
                border-right: 1px solid #afe0ea;
                text-align: center;
            }