HTML table行距的改变方法示例

HTML Table行距调整：一个被低估的CSS技巧

调整HTML表格的行距，这事儿听起来简单，但实际操作过的人都知道，它有点像在跟CSS“斗智斗勇”。你试过调整margin，发现纹丝不动；改过padding，效果又跟预期不太一样；甚至尝试border-collapse，感觉还是差了那么点意思。别急，今天就来分享一个实用且效果直接的小技巧——利用display属性结合margin来实现精准控制。

核心方法：display: block + margin

我们都知道，表格行（）默认的display属性值是table-row。在这个模式下，它对margin属性是“免疫”的。这也就解释了为什么你直接设置margin-top或margin-bottom会无效。

那么，破解之道是什么呢？其实很简单：改变它的“身份”。将tr的display属性设置为block，让它以一个块级元素的方式去响应margin。来看一段示例代码：

tr {
  margin-top: 0px;
  padding: 0px;
  display: block;
}

这只是一个基础设置。关键点在于，当你把tr变成block后，就可以通过margin-top或margin-bottom来自由控制行与行之间的间距了。下面这个对比图，能让你一眼看清效果：

上图是默认状态，行距较为宽松。当我们应用下面这段代码，将margin-top设置为负值来收紧行距时：

tr {
  margin-top: -10px;
  padding: 0px;
  display: block;
}

效果立竿见影，行与行之间的空隙明显缩小了。这个方法的优点在于直接、可控，尤其是当你需要微调或实现紧凑布局时，非常方便。

其他解决方案：回归表格的本源属性

其他解决方法

当然，任何方法都有其适用场景。上面提到的display: block技巧虽然强大，但它也带来一个副作用：一旦脱离table-row的显示模式，其子单元格（）可能会失去一些表格特有的对齐行为，布局灵活性上会打些折扣。

那么，有没有办法在不改变tr本质属性的前提下调整行距呢？答案是肯定的。这就需要请出CSS中专门为表格设计的“原生”属性组合：border-collapse 和 border-spacing。

这里的关键在于理解：在border-collapse: separate（边框分离）的模式下，border-spacing属性定义了单元格之间的水平及垂直间距。注意，这个间距作用于单元格之间，在视觉上就直观体现为行距和列距。

具体用法如下：

这段代码将表格边框设置为分离模式，并指定单元格在水平和垂直方向上的间距均为10像素。增大这个值，行距自然就变宽了；减小它，行距也就随之收紧。这个方法的优势在于，它完全遵守了表格的渲染规范，不影响任何表格内部的对齐与布局特性，是所有方案中最“正统”的一个。

话说回来，选择哪种方案，最终还得看你的具体需求。是追求极致的灵活控制，还是坚守表格的原始语义与兼容性？理解了这两种方法背后的原理，你就能在下次面对表格行距问题时，游刃有余地选出最合适的那把“钥匙”。