在使用HTML表的时候有时候需要我们改变行距，但是改变margin，padding，collapse等方法效果都不是很好。在这里我找到了一个实用的小技巧。利用display属性+margin来实现。
例子：
tr{margin-top:0px;padding:0px;display:block;}
我们来看一下对比
tr{margin-top:-10px;padding:0px;display:block;}
可以很明显的看到行距缩短了不少。
其他解决方法
问题提出：
table中的tr的默认display:table-row，虽然可以修改为display：block但是就失去了
在HTML页面设计中，表格（table）是一种常用的数据展示方式，但有时我们需要调整表格中行（tr）的间距以满足视觉效果。传统的CSS属性如margin、padding和collapse可能无法达到理想的效果。本文将深入探讨如何有效地改变HTML表格的行距。
我们可以尝试通过设置`display`属性和`margin`来改变行距。默认情况下，`<tr>`元素的`display`属性为`table-row`，这意味着它会按照表格行的方式进行布局。然而，如果将其改为`display: block`，则`<tr>`会像常规的块级元素一样显示，允许我们应用`margin`来调整间距。例如：
```css
tr {
margin-top: 0px;
padding: 0px;
display: block;
}
```
然后，通过改变`margin-top`的值，我们可以直观地看到行距的变化。例如，将`margin-top`设为负值，如`-10px`，可以显著缩小行距：
```css
tr {
margin-top: -10px;
padding: 0px;
display: block;
}
```
这种方法的缺点是，当`display`设置为`block`时，`<tr>`失去了一些原有的表格特性，比如单元格（td）的自动对齐功能。此外，尽管可以使用`padding`增加内边距，但`margin`对于`<tr>`来说并不起作用，因为它的外间距始终为0。
为了解决这个问题，我们可以利用CSS的`border-collapse`和`border-spacing`属性。`border-collapse`属性用于控制表格边框是否合并，而`border-spacing`则定义了单元格之间的距离。默认情况下，`border-collapse`是`separate`，即边框不合并，`border-spacing`为0，导致单元格紧密排列。如果我们希望增加行间距，可以这样设置：
```html
<table style="border-collapse: separate; border-spacing: 10px;">
<tr></tr>
</table>
```
在这个例子中，`border-collapse: separate`保持边框分离，`border-spacing: 10px`设置行间距为10像素。这将有效地在表格行之间创建空隙，而不会影响单元格的对齐或`<tr>`的原始行为。
总结来说，调整HTML表格行距的方法主要有两种：一是通过改变`display`属性并应用`margin`，但这可能导致表格原有特性的丧失；二是利用`border-collapse`和`border-spacing`，它们能更精确地控制行间距，同时保留表格的原有行为。选择哪种方法取决于具体的设计需求和对表格功能的需求。在实际应用中，可以结合这两种方法，根据项目需求灵活调整。
