- 基本实例样式
- 效果
- 代码
<!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>
- 效果