html+bootstrap 绘制表格(合并单元格)

依赖的样式: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>

猜你喜欢

转载自blog.csdn.net/qq_35379979/article/details/105575425