表格table设置上下间隙

图片说明

类似这样,td之间是没有间隙的,tr之间有间隙还有投影,这种布局可以用表格实现吗

你可以去W3CSchool去看一下,是html的帮助文档,会对你有帮助的

你不考虑IE9-可以将tr display设置为block就可以

 <!doctype html>
<style>
    table.grey {
        background: grey;
    }

        table.grey td {
            background: #fff;
        }

        table.grey tr {
            margin: 10px;
            display: block;
            margin: 10px;
        }
</style>
<table cellpadding="10" cellspacing="0" class="grey">
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
</table>

应该可以的


<br><br> td {<br><br> border-bottom: 5px solid #E2D6D6;<br> } <br>






11111111111111111111
11111111111111111111
11111111111111111111


图片说明

表格之间的间隙用style="padding: 1.8%;>调整,行之间的阴影可以设置边框颜色和大小来调试border-bottom: 1px solid rgb(234, 234, 234);上下左右的边框都是可以调的

用js
$('.table .el-table__body').attr('cellspacing', 5)
$('.table .el-table__header').attr('cellspacing', 5)