CSS控制表格tr之间的边距

程序员文章站 2024-02-23 23:34:36

...

tr之间距离可以通过设置 tr 的外边距（margin）来实现，但是注意必须先把tr的显示属性设置为块体（block）元素：

tr{
    display:block;
    margin:2px 0;
}

创建HTML元素示例如下：

<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*/
}

显示效果

文章转载于：learneroner 链接：https://zhidao.baidu.com/question/86746837.html