html table实现无左右边框布局

最新推荐文章于 2021-07-01 23:52:48 发布

weixin_30568591

最新推荐文章于 2021-07-01 23:52:48 发布

阅读量1k

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/xin-yu/p/7653195.html

版权

这是一个普通的表格，border=1，每个td都会有边框。

放手机里，table的左右边框明显有点多余且不美观。

那么如何去掉呢？

因为表格边框最终还是取决于td的。操作整个table的边框无法实现效果。

实现思路如下：

1、table的边框只留上边框和下边框

.table{
　　border-top: 1px solid #e8e8e8;
　　border-bottom:1px solid #e8e8e8;
}

2、th或td的边框最左边不要

.table td,.table th{
   border:1px solid #e8e8e8;
　　border-left:none;
}

3、这时候表格最右边还有边框，可以用这个去除

.table tr th:last-child{border-right:none;}
.table tr td:last-child{border-right:none;}

最终的效果，table左边和右边的边框去除了：

最后贴下源码

<html>
    <head>
        <meta charset="UTF-8">
        <meta content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" name="viewport"/>
        <meta content="telephone=no,email=no,date=no,address=no" name="format-detection"/>
        <style>
        *{margin:0;padding:0;}
        .table{table-layout: fixed;font-size:13px;width:100%;text-align:center;margin-top:10px;
            border-top: 3px solid #e8e8e8;border-bottom: 3px solid #e8e8e8;border-collapse:collapse;}
        .table th{background:#F0F4FB;}
        .table th,.table td{height:45px;border:3px solid #e8e8e8;border-left:none;}
        .table tr th:last-child{border-right:none;}
        .table tr td:last-child{border-right:none;}
        </style>
    </head>
    <body>
        <table class="table" cellpadding="0" >
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>成绩</th>
                <th>班级</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>15</td>
                <td>230</td>
                <td>42</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>16</td>
                <td>180</td>
                <td>43</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>15</td>
                <td>250</td>
                <td>42</td>
            </tr>
        </table>
    </body>
</html>

转载于:https://www.cnblogs.com/xin-yu/p/7653195.html

weixin_30568591

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html table实现无左右边框布局

这是一个普通的表格，border=1，每个td都会有边框。放手机里，table的左右边框明显有点多余且不美观。那么如何去掉呢？因为表格边框最终还是取决于td的。操作整个table的边框无法实现效果。实现思路如下：1、table的边框只留上边框和下边框.table{　　border-top: 1px solid #e8e8e8;　　border-b...
复制链接

扫一扫