CSS的table tr行间距指的是表格中每行之间的空白间隔。许多网站的表格布局都需要调整这个参数,来控制表格的显示效果。以下是如何使用CSS来改变表格的行间距。
首先,需要获取到表格的HTML代码。一个基本的表格应该长这样:
<table> <tr> <th>表头一</th> <th>表头二</th> </tr> <tr> <td>内容一</td> <td>内容二</td> </tr> </table>
如果需要改变每行之间的距离,可以使用CSS样式表。以下是一些样式建议:
table { border-collapse: collapse; } tr { border-bottom: 1px solid #ccc; /* 可选择性添加 */ height: 30px; /* 行高,根据实际情况调整 */ }
其中,border-collapse属性是为了消除表格中间的间隙,border-bottom属性可以统一为每一行添加下边框,height属性可以改变每行的高度。这样设置之后,每一行的距离应该就会变得更加紧凑。
需要注意的是,如果表格中有行内元素或者图片,需要与这样的情况结合使用,避免出现错位的情况。调整表格宽度也可能影响到行之间的距离。