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>

       

posted @ 2019-04-24 12:18  好胖的兔子  阅读(699)  评论(0)  编辑  收藏  举报