依赖的样式：bootstrap
效果图：
以下是html源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.box-tools {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="row">
<table class="table table-striped" border="1">
<thead>
<tr>
<th style="text-align: center;">专家姓名</th>
<th style="text-align: center;" colspan="2">发送信息</th>
<th style="text-align: center;">是否发送</th>
</tr>
</thead>
<tbody>
<tr style="text-align: center;">
<td rowspan="3" style="text-align: center;vertical-align: middle;">张三</td>
<td>004 水利水电工程系</td>
<td><span>已发送</span></td>
<td><input type="checkbox" style="width:20px;height:20px;" id="1"></td>
</tr>
<tr style="text-align: center;">
<td>013 精密仪器系</td>
<td><span>已发送</span></td>
<td><input type="checkbox" style="width:20px;height:20px;" id="2"></td>
</tr>
<tr style="text-align: center;">
<td>014 能源与动力工程系</td>
<td><span>已发送</span></td>
<td><input type="checkbox" style="width:20px;height:20px;" id="3"></td>
</tr>
<tr style="text-align: center;">
<td rowspan="3" style="text-align: center;vertical-align: middle;">李四</td>
<td>004 水利水电工程系</td>
<td><span>未发送</span></td>
<td><input type="checkbox" checked style="width:20px;height:20px;" id="1"></td>
</tr>
<tr style="text-align: center;">
<td>013 精密仪器系</td>
<td><span>未发送</span></td>
<td><input type="checkbox" style="width:20px;height:20px;" id="2"></td>
</tr>
<tr style="text-align: center;">
<td>014 能源与动力工程系</td>
<td><span>已发送</span></td>
<td><input type="checkbox" style="width:20px;height:20px;" id="3"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
