css table中细线条以及线条间距问题

css table中细线条以及线条间距问题

今天在学习使用js动态生成table，发现了以下容易犯错的地方

首先是线条问题，很明显图中的线条不是我们想要的细线条，这实在太丑了…

那么怎么实现细线条呢，先分析一下为什么会出现这样的丑线条。
我们先给table添加了一个border，这样表格外围就会出现一个边框，但表格内的td并没有设置到，于是又给td设置了border，那问题来了，默认情况下td与table边框是有一点距离的，两个边框就形成了上图的情况。
那既然如此，我们可以给table只设置border-left border-top，给td只设置border-right border-bottom，这样就形成了一像素的细边框，但观察发现这个边框还有个问题，就是线条根本没有连到一起，之前提到的，td之间是有一定间距的

这时就需要使用border-spacing=0属性，将间距调为零，完成。