如何使用CSS合并表格边框？

在CSS中可以使用border-collapse属性来合并表格边框；border-collapse属性用于设置表中存在的单元格的边框，并告知这些单元格是否共享公共边框。

border-collapse属性设置表格的边框是否被合并为一个单一的边框。

语法：

border-collapse: separate|collapse|initial|inherit;

属性值：

●　separate：用于设置单元格的单独边框。

●　collapse：用于折叠相邻的细胞并形成共同的边界。

●　initial：用于将border-collapse属性设置为其默认值。

●　inherit：当border-collapse属性从其父元素继承时使用。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS border-collapse属性</title> 
		<style> 
            table, td, th { 
                border: 1px solid black; 
            } 
            #separateTable { 
                border-collapse: separate; 
            } 
            #collapseTable { 
                border-collapse: collapse; 
            } 
        </style> 
    </head> 
    <body> 
    <center> 
        <h2>border-collapse属性</h2> 
        <h3>默认或设置border-collapse:separate;</h3> 
        <table style="width:70%" id="separateTable"> 
            <tr> 
                <th>姓名</th>
                <th>年龄</th>
            </tr> 
            <tr> 
                <td>晓华</td>
                <td>15</td> 
            </tr> 
            <tr> 
                <td>天健</td>
                <td>27</td> 
            </tr> 
            <tr> 
                <td>邓琴</td>
                <td>28</td>
            </tr> 
        </table>
        <h3>border-collapse:collapse;</h3> 
        <table style="width:70%" id="collapseTable"> 
            <tr> 
                <th>姓名</th>
                <th>年龄</th>
            </tr> 
            <tr> 
                <td>晓华</td>
                <td>15</td> 
            </tr> 
            <tr> 
                <td>天健</td>
                <td>27</td> 
            </tr> 
            <tr> 
                <td>邓琴</td>
                <td>28</td>
            </tr> 
        </table>
    </center> 
</body> 
  
</html>

效果图：

0ec4e7a1b304b765601d1fca1a8cfcc.png-600