### 方法一:使用 CSS `border-collapse` 属性与边框宽度
首先,请确保你的 `<table>` 标签开启了CSS样式的控制,并且设置了 `border-collapse` 为 "separate" 这个值允许每行之间存在独立的空间:
html
<style>
table {
border-collapse: separate;
border-spacing: 0; /* 设置单元格间的水平/垂直间距 */
}
td {
padding-top: 15px; /* 使用内填充模拟增加上下的行距 */
padding-bottom: 15px;
}
tr {
margin-bottom: 20px; /* 考虑兼容性问题,这种方法并不总是奏效 */
}
</style>
<table>
<tr><td>Row 1 Cell 1</td></tr>
<!-- 更多行 -->
</table>
然而需要注意的是,默认情况下浏览器对 TR 元素直接应用外边距 (`margin`) 并不会影响到相邻行之间的空间大小。因此此方法对于跨不同浏览器实现一致的效果并不是最佳实践。
### 方法二:利用伪类选择器 (:not(:last-child))
可以针对除最后一行之外的所有行添加底部空白区域:
css
<style>
tbody > tr:not(:last-of-type) {
margin-bottom: 1em; /* 自定义所需的行间距 */
}
/* 或者用padding方式给每个TD加上下间隙 */
td{
padding: 10px 0;
}
</style>
<body>
<table>
<tbody>
<tr><td>Row 1 Cell 1</td></tr>
<!-- 更多行 -->
</tbody>
</table>
</body>
这个方法能更好地保证所有主流现代浏览器的一致显示效果,但是请注意它不适用于IE8及更低版本的浏览器。
总的来说,虽然HTML本身没有提供专门设定表格行间距离的功能,但我们可以借助于CSS的各种手段灵活地进行定制化布局处理。推荐优先采用第二种方案,结合合适的CSS选择器以及合理的内外补丁(padding/margin),既能保持良好的视觉体验又能兼顾较好的浏览器兼容性。