打造精美的CSS前端细线表格
表格的细线边框
以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。让我们真的相信，CSS就是我们的白马王子(白雪公主)。
table{ border-collapse:collapse;} collapse单词是合并的意思
border-collapse:collapse;表示边框合并在一起。
这是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
table{
width: 700px;
height: 300px;
border: 1px solid red;
border-collapse: collapse; /*合并相邻边框*/
}
td{
border: 1px solid red;
}
</style>
</head>
<body>
<table cellpadding="0" cellpadding="0">
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
</body>
</html>
2019年12月5日
上一篇： 表格边框、表头和单元格合并的设置方法
下一篇： 玩转HTML边框(border)的技巧