border-collapse:separate;
border-spacing: 0px 10px;
参考链接:https://blog.csdn.net/caicai1171523597/article/details/88324819
border-collapse 属性设置表格的边框是否被合并为一个单一的边框。
它的属性值如下:
border-collapse属性加上border-spacing属性就可以设置tr行间距
案例一:证明border-collapse的默认值是separate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div_box{
width: 300px;
height: 80px;
margin: 0 auto;
margin-top: 100px;
}
.div_box table{
border: 1px solid rebeccapurple;
}
.div_box table tr td{
border: 1px solid grey;
}
</style>
</head>
<body>
<div class="div_box">
<table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-1</td>
<td>单元格2-2</td>
</tr>
</table>
</div>
</body>
</html>
效果图
案例二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div_box {
width: 300px;
height: 80px;
margin: 0 auto;
margin-top: 100px;
}
.div_box table {
border: 1px solid rebeccapurple;
/* 首先把单元格与单元格的间距设置为0 */
/* border-collapse: collapse; 或者 border-spacing: 0px; */
/* border-spacing第一个值 是水平 第二个值 设置垂直 */
border-collapse:separate;
border-spacing: 0px 10px;
}
.div_box table tr td {
border: 1px solid grey;
}
</style>
</head>
<body>
<div class="div_box">
<table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-1</td>
<td>单元格2-2</td>
</tr>
</table>
</div>
</body>
</html>
效果图