一段简单的代码:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
如果只给table加边框的话是这样的。
table{
width:300px;
height:500px;
border:1px solid red;
}
效果:
如果给td标签也加上边框:
td{
border:1px solid red;
}
效果:
那么问题就来了:如何让单元格的边框合并在一块?问题有两种解决思路。
①.在table之中加cellspacing=0(将单元格之间的距离变小)
<table cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
……
效果:
将会变成粗线条,就是简单的两根线条合在一块变粗线条。
②.利用Css样式的border-collapse: collapse;来合并边框
table{
width:300px;
height:500px;
border:1px solid red;
border-collapse: collapse;
}
效果:
就能将两根细线合并成一根细线。
完整的代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>边框合并</title>
<style type="text/css">
table{
width:300px;
height:500px;
border:1px solid red;
border-collapse: collapse;
/*使用border-collapse: collapse;可以将边框合并成一根线*/
}
td{
border:1px solid red;
}
</style>
</head>
<body>
<!--table之中加cellspacing=0将会合并成粗线条-->
<table cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>