在CSS中可以使用border-collapse属性来合并表格边框；border-collapse属性用于设置表中存在的单元格的边框，并告知这些单元格是否共享公共边框。
border-collapse属性设置表格的边框是否被合并为一个单一的边框。
语法：
属性值：
● separate：用于设置单元格的单独边框。
● collapse：用于折叠相邻的细胞并形成共同的边界。
● initial：用于将border-collapse属性设置为其默认值。
● inherit：当border-collapse属性从其父元素继承时使用。
示例：
效果图：
浏览器支持
border-collapse属性支持的浏览器如下：
● Apple Safari 1.2
● 谷歌Chrome 1.0
● Internet Explore / Edge 5.0
● Opera 4.0
● Firefox 1.0
原文地址： 如何使用CSS合并表格边框？
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：1、外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观；
例如：
2、内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在
head
部分通过
标签定义内部样式表；
例如：<style
type="text/css">body
{background-color:
red}p
{margin-left:
20px}
3、内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何
CSS
属性。以下实例显示出如何改变段落的颜色和左外边距。
例如：
This
is
a
paragraph
这种问题，应该是你对“样式”和“属性”的概念还不清楚；CSS是层叠样式表，是一种用来控制HTML元素样式的代码；
它主要分为选择器和样式表达式，如：
div
.div
#div
以上被称为选择器，是选择一个或一类HTML元素
{display:nonewidth=200px}
以上被称为表达式，是描述一个或一类HTML元素的样式
那么这两个必须同时使用，如：
#div {display:nonewidth=200px}
就表示 为通过选择器选择的一个或一类HTML元素 添加表达式中所述的样式；
CSS中的表达式所能描述的，只有样式；比如：
这个DIV是否显示？
显示在什么位置？
多宽多高？
是否透明，字体大小等。。。
可以看出，通过这些CSS控制，你可以改变页面上任何元素的样式，通过也要知道，它所能做的，也仅仅是改变元素的样式，样式以外的东西是没法改变的；
那么你所提的这个合并单元格是不是属于样式呢？
答案很肯定，不属于；为什么呢？
因为属性是用来控制这个标签本身的一种状态，如：id、name等；
通过这些属性的控制，可以实现的就不仅仅约束在样式中了，就好象合并单元格的cols属性，它不仅仅改变了表格的样式，最根本也改变了表格的结构；
那么刚才提到，CSS只能改变元素的样式，那么对于改变元素的结构，它是心有余而力不足的。
另外一个很容易混淆的就是元素的样式属性，比如元素本身也有width属性，height属性，这些东西也可以控制元素的宽度或高度，为什么在CSS里面就可以使用呢？
答案和上面一样，这些width或height，虽然作为元素的属性，但它所改变的，仅仅是元素的样式，对元素本身结构没有任何改变，因此我们可以使用CSS来代替它们，并且现在也不建议直接在元素本身写样式属性；
如果你想合并单元格，又不想写在元素上，那么就只有用javascript了。
如果你还有什么不明白的，可以下一个DHTML API和CSS API，里面对每个元素的哪些属性和样式已经描述的很清楚了。
如果你觉得太多记不住，那么你就不要去记住它，多写写，多练练，你就会发现其中是有规律的；
以上纯属个人理解，如有偏差，请指教；
