为什么给表格tr标签设置padding不生效且不建议这么做？

这种表现是CSS规范对表格布局模型的明确规定，具体原因如下：

• 元素显示类型的属性限制
  tr的默认display属性值为table-row，CSS规范中明确说明，table-row、table-column这类行、列级别的表格元素，本身不支持padding属性，只有table、table-cell（对应<td>、<th>元素）类型的节点才支持内边距设置。
• 表格布局的逻辑设计
  表格行的定位是作为内部单元格的分组载体，自身的尺寸完全由内部单元格的总尺寸、表格的border-collapse、border-spacing规则共同计算得出，本身没有独立内边距的设计场景。如果允许给tr设置padding，会破坏表格原生的单元格对齐规则、行列自适应计算逻辑，容易出现同列单元格错位、表格宽高计算异常等问题。

大家实际开发中常遇到的错误写法和正确实现如下：

/* 不推荐的写法，不会生效 */
tr {
   padding-bottom: 20px;
}

/* 正确的实现方式，给单元格设置内边距 */
th, td {
   padding-bottom: 20px;
}

如果需要实现行与行之间的间距，除了上述给单元格加内边距的方式，也可以给table元素设置border-spacing属性控制单元格间距，或者在border-collapse: separate的前提下给tr设置透明边框模拟间距效果。

内容的提问来源于stack exchange，提问作者Andrea Costanzo