bootstrap实现表格

• 基本实例样式
  • 效果
  • 代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户管理页面</title>
    
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/dashboard.css" rel="stylesheet">
    
        <script src="js/jquery.min.js"></script>
        <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
    </head>
    <body>
    
        <!-- container自适应 -->
        <div class="container">
            <!-- 为表格添加基础样式 ，.table为任意<table>添加基本样式 -->
            <table class="table">
                <!-- 表格标题行的容器元素，用来识别表格列 -->
                <thead>
                    <tr>
                        <!-- 特殊的表格单元格，用来识别行或列 -->
                        <th>测试标题</th>
                        <th>测试标题</th>
                        <th>测试标题</th>
                        <th>测试标题</th>
                        <th>测试标题</th>
                    </tr>
                </thead>
                <!-- 表格主题中的表格行的容器元素 -->
                <tbody>
                    <!-- 一组出现在单行单元格的容器元素 -->
                    <tr>
                        <!-- 默认的表格单元格 -->
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                    </tr>
                    <tr>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                    </tr>
                </tbody>
            </table>
        </div>
    
    </body>
    </html>

• 条纹状表格
  • 效果
  • 代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户管理页面</title>
    
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/dashboard.css" rel="stylesheet">
    
        <script src="js/jquery.min.js"></script>
        <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
    </head>
    <body>
    
        <div class="container">
            <!-- .table-striped可以给tbody之内的每一行添加斑马条纹样式 -->
            <table class="table table-striped">
    
                <thead>
                    <tr>
    
                        <th>测试标题</th>
                        <th>测试标题</th>
                        <th>测试标题</th>
                        <th>测试标题</th>
                        <th>测试标题</th>
                    </tr>
                </thead>
    
                <tbody>
    
                    <tr>
    
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                    </tr>
                    <tr>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                    </tr>
                </tbody>
            </table>
        </div>
    
    </body>
    </html>

• 带边框表格
  • 效果
  • 代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户管理页面</title>
    
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/dashboard.css" rel="stylesheet">
    
        <script src="js/jquery.min.js"></script>
        <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
    </head>
    <body>
        <div class="container">
            <!--
                .table-bordered为表格和其中的每个单元格增加边框
            -->
            <table class="table table-bordered">
    
                <thead>
                    <tr>
    
                        <th>测试标题</th>
                        <th>测试标题</th>
                        <th>测试标题</th>
                        <th>测试标题</th>
                        <th>测试标题</th>
                    </tr>
                </thead>
    
                <tbody>
    
                    <tr>
    
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                    </tr>
                    <tr>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                        <td>测试内容</td>
                    </tr>
                </tbody>
            </table>
        </div>
    
    </body>
    </html>