web前端-表格处理（wap圆角）

最新推荐文章于 2022-07-31 20:31:24 发布

Yozo椰子

最新推荐文章于 2022-07-31 20:31:24 发布

阅读量293

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/lin875859873/article/details/112611626

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

html：

    <div class="tb">
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr class="th">
                <td>今日种花</td>
                <td>累计种花</td>
                <td>当前可领取</td>
                <td>累计已领取</td>
            </tr>
            <tr>
                <td><em>10</em>人</td>
                <td><em>150</em>人</td>
                <td><em>1500</em>蚕豆<br><em>30包</em>花生</td>
                <td><em>150000</em>蚕豆<br><em>3000包</em>花生</td>
            </tr>
            <tr>
                <td><em>10</em>人</td>
                <td><em>150</em>人</td>
                <td><em>1500</em>蚕豆<br><em>30包</em>花生</td>
                <td><em>150000</em>蚕豆<br><em>3000包</em>花生</td>
            </tr>
            <tr>
                <td><em>10</em>人</td>
                <td><em>150</em>人</td>
                <td><em>1500</em>蚕豆<br><em>30包</em>花生</td>
                <td><em>150000</em>蚕豆<br><em>3000包</em>花生</td>
            </tr>
        </table>
    </div>

css：

.tb {
    width: 6.3rem;
    margin: .8rem auto 0;
    box-shadow: #18c18b 0 0 0 1px inset;
    border-radius: .1rem;
    border-spacing: 0;
    overflow: hidden;
    font-size: .24rem;
    text-align: center;
    line-height: 1.6;
}

.tb .th {
    color: #fff;
    background-color: #18c18b;
}

.tb .th td {
    box-shadow: #fff 1px 0 0 0;
}

.tb .th td:last-child {
    box-shadow: none;
}

.tb tr{
    box-shadow: #18c18b 0 -1px 0 0;
}

.tb td {
    box-shadow: #18c18b 1px 0 0 0;
    box-sizing: border-box;
    padding: .05rem .1rem;
}

.tb td em {
    color: #ff6839;
}