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

2018-12-04  本文已影响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%,达到目的。

上一篇 下一篇

猜你喜欢

热点阅读