如何做一个有行距的表格

前天用到表格的时候，被表格的简洁的js内容操作方法给吸引了。于是写了一个带排序和可删改可拖拽的表格。但是对表格的边线十分不满，丑的没话说。想要给行加个行距，最后发现，margin对于table根本无效。于是就想着用css给表格重新布局一下。

思路非常简单，把表格的行变成块集元素，td变成inline-block行内块集元素。这样就能脱离表格的默认样式了。然后就是对齐，通过百分比设定的宽度，加上textalign居中，可以轻松的实现cell的对齐问题。然后就可以给表格加上些牛逼的属性啦，圆角啊，affter伪元素动画，变换啊什么的。

 

<table class="tbe">
    <thead>
        <tr>
            <th class="tdr">title1</th>
            <th class="tdr">title2</th>
            <th class="tdr">title3</th>
            <th class="tdr">title4</th>
            <th class="tdr">title5</th>
            <th class="tdr">title6</th>
            <th class="tdr">title7</th>
            <th class="tdr">title8</th>
        </tr>
    </thead>
    <tr class="tr">
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
    </tr>
    <tr class="tr">
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
        <td class="tdr">neirong</td>
    </tr>
</table>
<style>
    .tbe{
        width: 600px;
    }
    .tbe thead tr{
        background-color:rgb(100,225,200);
        text-align:center;
        display: block;
        text-align:center;
    }
    .tbe thead tr th{
        display: inline-block;
        width:10.6%;
    }
    .tbe tr{
        display:block;
        background-color:rgb(190,100,90);
        margin-top:10px;
        text-align:center;
    }
    .tbe tr td{
        display: inline-block;
        width:10%;
    }
</style>