CSS简介代码实现表格(table)只有横线没有竖线的效果，一个简约卡片化精美的数据表格(类似Bootstrap表格)

实现效果

简单来说先设置 table 的 border-collapse:collapse，把表格整体边框取消。然后设置 table,th,tr,td 底部边框线即可。

HTML：

<table>
	<tr>
    	<th>编号(ID)</th>
        <th>名称(Name)</th>
        <th>描述(Describe)</th>
        <th>排序(Sort)</th>
        <th>操作(Operation)</th>
    </tr>
    <tr>
        <td>01</td>
        <td>产品经理</td>
        <td>负责产品落地</td>
        <td>one</td>
        <td>无操作</td>
    </tr>
    <tr>
        <td>02</td>
        <td>架构师</td>
        <td>负责技术架构</td>
        <td>two</td>
        <td>无操作</td>
    </tr>
</table>

CSS：

table{
   	width:70%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);/* 阴影 */
    border-collapse:collapse;/* 取消表格边框 */
    letter-spacing:1px;/* 文字缩进 */
}
table,th,tr,td{ 
    border-bottom:1px solid #dedede;/* 表格横线 */
    padding:29px;
    text-align: center;
}

---