1. 程式人生 > >CSS控制表格tr之間的邊距

CSS控制表格tr之間的邊距

tr之間距離可以通過設定 tr 的外邊距(margin)來實現,但是注意必須先把tr的顯示屬性設定為塊體(block)元素:

tr{
    display:block;
    margin:2px 0;
}
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>

    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>


新增CSS樣式

table{
    border-collapse: collapse;
}

td{
    width:90px;
    padding:5px;
    border:1px solid green;
}

tr{
    display:block; /*將tr設定為塊體元素*/
    margin:2px 0;  /*設定tr間距為2px*/
}

顯示效果