css 表格table 边框重叠问题解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
width: 300px;
text-align: center;
border-collapse: collapse;/* 为table设置这个属性 */
}
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>金额</th>
<th>日期</th>
</tr>
<tr>
<td>张三</td>
<td>1892.2</td>
<td>2020.7.2</td>
</tr>
<tr>
<td>李四</td>
<td>1892.2</td>
<td>2020.7.2</td>
</tr>
</table>
</body>
</html>
重点:
border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
当设置了border-collapse: separate
后,