html合并td边框线,使用css将table td边框合并为细边框

使用css将table td边框合并为细边框2017-12-13 22:07

还记得第一次使用table的时候，无论怎么弄，边框都不是自己想要的效果。

因为只想让框边成为一条细线，当时就在想有这么难吗？

不过后来还是解决了，今天突然想起，就简要的写一下分享出来。

希望对遇到这样问题的小伙伴有所帮助。

对于这个问题，有一个俗语叫做“table边框合并”。

最主要就是用到border-collapse: collapse;这段代码。 html代码

table{

margin: 0 auto;

width: 300px;

border:1px red solid;

}

th,td {

text-align: center;

border: 1px blue solid;

}

新闻标题	指数	访问量
千万劳斯莱斯被撞	293436	88
老师卧底揭校园贷	396610	98
学生被学姐骗传销	211591	68

我们将上面的css代码中table样式里加入border-collapse: collapse;就可以了。