表格边框不合并怎么办？border-collapse来帮你！

今儿个，咱来聊聊border-collapse这个小东西，别看它不起眼，有时候能把人给折腾死。

我做一个表格，想让表格的边框看起来细一点、清爽一点。我给每个单元格都设置边框：

<style>
table, th, td {
border: 1px solid black;

</style>

结果，出来的效果是这样的：边框都挤在一起，双层的，看起来又粗又难看。这可不行，这跟我想要的效果完全不一样！

咋办？我开始四处找资料。还真让我找到！原来，问题出在表格的默认行为上。表格的每个单元格都有自己的边框，所以相邻的单元格就会出现两条边框，看起来就像是双层边框。

要解决这个问题，就得用到border-collapse。这玩意儿，说白，就是告诉表格：“把相邻的边框合并成一条！”

我赶紧把代码改改：

<style>

table {
border-collapse: collapse; / 看这里，看这里！ /

th, td {
border: 1px solid black;


</style>

这下子，世界清静！边框都乖乖地合并成一条细线，看起来舒服多！

border-collapse还有另一个值，叫separate。这个值的意思就是：“别合并，保持原样！”。如果你把border-collapse设置成separate，那表格的边框就还是会显示成双层。

实践出真知，这回的小折腾让我彻底搞明白border-collapse的用法。以后再遇到表格边框的问题，咱就不怕！