table的tr间距问题

灵活控制tr的间距是我们在项目开发的过程中经常会遇到的问题，比如让tr之间是固定的间距，单元格（即td）合并。

第一反应可能是使用外边距来控制，但是tr对padding的设置是有用的，而对于margin的设置是不起作用的。你可能会想是不是可以用display： block来将tr变成块元素，再设置块元素的外边距，但是这样就失去了tr特有的显示效果（此时display的属性为display: table-row），如td的自动对齐，垂直居中等。

那么怎么很好的取控制呢，可以通过css中border-collapse和border-spacing两个属性。
border-collapse可以设置为三个值separate(默认) 边框独立| collapse 相邻边被合并 | inherit 从父元素继承 border-collapse 属性的值。
例如：设置单元格合并，tr之间（也就是行与行之间）有一定的间距，代码如下：

table{
  border-collapse: separate;/*这是该属性的默认值，可以不要*/
  border-spacing: 0 10px;
}

效果如下：