有关表格双层边框的坑
今天刷百度前端学院试题的时候发现了一个奇怪的现象，给table元素的td元素分别加上不同颜色的background-color中间会有一条边框，类似这个样子
由于这一道尴尬的白线实在是影响页面整洁度，所以我考虑试着把边框颜色也填充成backgroung-color中方的颜色，试图得到没有白线的完美表格，添加了表格边框之后（在这里为了凸显差异性，我选择了颜色对比明显的对比色来填充边框颜色）
那道令人尴尬的白色线条依然存在，经过我的仔细分析，问题好像并没有那么简单，下面是我为table，tr，td元素都添加了边框之后显示的
那么问题来了，既然不是边框宽度，白色的框框是什么东西？
通过对度娘的搜索，我发现了border-collapse这个CSS元素，一下为W3C中的介绍：
定义和用法
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
| 默认值： | separate |
|---|---|
| 继承性： | yes |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.borderCollapse="collapse" |
可能的值
| 值 | 描述 |
|---|---|
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
通过添加border-collapse:collapse;我得到了想要的表格，美滋滋~
你以为到这里就结束了？哈哈哈，结束的话怎么能对得起金牛男爱钻牛角尖的形容呢！
不知道各位看官刚刚有没有注意到border-spacing 和 empty-cells 这两个元素，好奇宝宝又出动了！去W3C瞅瞅这又是啥？
定义和用法
empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。
注释：某些版本的 IE 浏览器不支持此属性。
说明
该属性定义了不包含任何内容的表单元格如何表示。如果显示，就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate，否则将忽略这个属性。
| 默认值： | show |
|---|---|
| 继承性： | yes |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.emptyCells="hide" |
可能的值
| 值 | 描述 |
|---|---|
| hide | 不在空单元格周围绘制边框。 |
| show | 在空单元格周围绘制边框。默认。 |
| inherit | 规定应该从父元素继承 empty-cells 属性的值。 |
----------------------------------------------我是分割线-----------------------------------------------------
定义和用法
border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。
注释：某些版本的IE浏览器不支持此属性。
说明
该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
| 默认值： | not specified |
|---|---|
| 继承性： | yes |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.borderSpacing="15px" |
可能的值
| 值 | 描述 |
|---|---|
| length length |
规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个 length 参数，那么定义的是水平和垂直间距。 如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。 |
| inherit | 规定应该从父元素继承 border-spacing 属性的值。 |
empty-cells属性用于是否显示表格中空表格的边框，好像没什么用处。
border-spacing属性用于设置表格中td与td之间的水平和垂直间距？试试：
好像是这么回事。