关于table实现单边框表格的用法

表格一

去除表格td间距实现table单边线，效果图如下：

代码如下：

table{
        width: 40%;
        margin: 0 auto;
        margin-top: 50px;
        border-collapse:collapse;
    }
    table tr{
    }
    table tr td{
        text-align: center;
        border: 1px solid green;
    }

上面高亮部分代码加入即可实现单边框效果！

 

表格二

 

功能实现代码如下：

 

.box{
    display: table;
    width: 87.5%;
    margin: 0 auto;
    text-align: center;
}

.box ul{
    display: table-row;
}

.box ul li{
    display: table-cell;
    border: 1px solid #ccc;
    border-bottom: 0px;
}
.box ul li+li{
    border-left: 0px;
}

.box ul:last-child li{
    border-bottom: 1px solid #ccc;
}

原本以为talbe 无可替代，菜鸟无意发现css 盒子模型的强大 display:table;