具体代码:
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.main{
width: 1200px;
margin: 0 auto;
margin-top: 50px;
}
.thead{
height: 40px;
line-height: 40px;
border: 1px solid #333;
}
.thead ul,.tbody ul {
display: flex;
justify-content: space-evenly;
}
.thead ul li {
text-align: center;
flex: 1;
border-right: 1px solid red;
}
.thead ul li:last-child{
border-right: 0;
}
.tbody ul{
border-bottom: 1px solid rgb(24, 24, 24);
}
.tbody ul li {
text-align: center;
flex: 1;
line-height: 40px;
}
.tbody li span {
user-select: none;
cursor: pointer;
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 18px;
font-weight: 400;
background-color: rgb(214, 214,