方式一
使用 CSS属性 border-collapse, 合并单元格边框线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-collapse</title>
<style type="text/css">
/*
参考: http://www.w3school.com.cn/cssref/pr_tab_border-collapse.asp
所有主流浏览器都支持 border-collapse 属性
collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
*/
table {
/* 合并单元格框线 */
border-collapse: collapse;
}
td {
border: solid 1px red;
width: 100px;
height: 28px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<td>b3</td>
</tr>
</table>
</body>
方式二
表格背景色 + 单元格背景色 + border-spacing 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-spacing</title>
<style type="text/css">
/*
红色边框线 实际上市 单元格之间的间隙 (露出表格的背景色)
*/
table {
background-color: red;
border-spacing: 1px;
}
td {
background-color: white;
width: 100px;
height: 28px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<td>b3</td>
</tr>
</table>
</body>