1.border-collapse:collapse;表示相邻边框合并一起
2.表格和单元格设置样式:
table,
td{
border: 1px solid red;
/* 合并相邻的边框 */
border-collapse: collapse;
}
3.代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格细线边框</title>
<style>
/* 设置表格大小 */
table{
width: 500px;
height: 249px;
}
th{
width: 35px;
}
/* 表格和单元格设置样式 */
table,
td,th{
border: 1px solid red;
/* 合并相邻的边框 */
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<table align="center" cellspacing="0">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td> <img src="1.png"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</table>
</body>
</html>
4.运行效果: