美文网首页
手机端移动端 H5 css画出table表格0.5px边框

手机端移动端 H5 css画出table表格0.5px边框

作者: 喵喵同学嘛 | 来源:发表于2018-12-04 10:15 被阅读0次

效果图如下:


image.png
table {
            text-align: center;
            vertical-align: middle;
            border-collapse: collapse;
            position: relative;
            width: 100%;
        }

        table thead {
            height: 35px;
            background-color: #E6F9F5;
        }

        table td {
            border: 0;
            padding: 15px;
            position: relative;
        }

        table td::after {
            content: "";
            display: block;
            position: absolute;
            left: 0%;
            top: 0%;
            width: 200%;
            height: 200%;
            border: 1px solid #8be7e4;
            border-top: none;
            border-right: none;
            transform-origin: 0 0;
            transform: scale(0.5);
        }

        table::after {
            content: "";
            display: block;
            position: absolute;
            left: 0%;
            top: 0%;
            width: 200%;
            height: 200%;
            border: 1px solid #8be7e4;
            border-left: none;
            border-bottom: none;
            transform-origin: 0 0;
            transform: scale(0.5);
        }

这里主要是利用了 transform:scale(0.5) 先把边框设置为200%,然后在缩小50%,达到目的。

相关文章

  • 手机端移动端 H5 css画出table表格0.5px边框

    效果图如下: 这里主要是利用了 transform:scale(0.5) 先把边框设置为200%,然后在缩小50%...

  • 前端遇到的那些技术难点及性能优化之css篇

    移动端兼容 css篇 移动端的 1px 问题描述:1px 的边框。在高清屏下,移动端的 1px 会很粗。 产生原因...

  • CSS知识

    CSS3资料员 http://tympanus.net/codrops/css_reference 解决移动端边框...

  • 06day

    表格边框 如需在 CSS 中设置表格边框,请使用 border 属性。下面的例子为 table、th 以及 td ...

  • 表单

    表格边框 如需在 CSS 中设置表格边框,请使用 border 属性。下面的例子为 table、th 以及 td ...

  • 移动端0.5px边框实现方式

    写在前面在手机页面中,使用1px边框,有事感觉比较粗。使用0.5px会是的页面更加精简。 下面是代码实现 html...

  • 常用代码(即时更)

    PC端:QQ在线客服链接代码 tencent咨询 PC端手机端通吃:QQ在线客服链接代码 wpa咨询 移动端H5 ...

  • 2018-10-16移动设备兼容性

    移动设备h5 web网站手机H5页面的区别 分辨率不同,web端为宽屏,手机端为窄平移动设备兼容测试的问题 买手机...

  • 移动端样式问题汇总

    1、去掉移动端苹果手机点击时阴影 2、input去掉边框、点击阴影、下划线 3、css画箭头 4、超出1行/2行显...

  • 移动端CSS3

    1.滚动属性 2.css3多行超出隐藏 3.背景毛玻璃 嗨皮效果 清除移动端浏览器点击时候的边框 移动端禁止文字选...

网友评论

      本文标题:手机端移动端 H5 css画出table表格0.5px边框

      本文链接:https://www.haomeiwen.com/subject/wpapcqtx.html