- 表格样式
- .table：为任意
- .table-bordered 为表格和其中的每个单元格增加边框线。
- .table-striped：实现隔行变色的效果。
- .table-hover：实现鼠标放上的效果。
- .table-condensed：紧凑型的表格将padding值减半。
- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 支持移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 导入CSS文件 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- 引入js --> <!-- bootstrap.js 引入必须依赖 jQuery, jQuery需要自行去下载导入进来 --> <script src="bootstrap/js/jquery-3.4.1.js"></script> <!-- 不引入 jQuery 则会报错 Uncaught Error: Bootstrap's JavaScript requires jQuery --> <script src="bootstrap/js/bootstrap.js"></script> <style> /* 自定义隔行换色 可注释会有默认效果 */ table.table-striped tr:nth-child(odd) { background-color: skyblue; } /* 自定义隔行换色 可注释会有默认效果 */ table.table-striped tr:nth-child(even) { background-color: #f00; } /* 悬浮变色 可注释会有默认效果 */ table.table-hover tr:hover { background-color: skyblue; } </style> </head> <body> <div class="container"> <h2>默认:</h2> <table> <tr> <td>序号</td> <td>商品名称</td> <td>价格</td> <td>状态</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> </table> <h2>.table</h2> <table class="table"> <tr> <td>序号</td> <td>商品名称</td> <td>价格</td> <td>状态</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> </table> <h2>.table .table-bordered</h2> <table class="table table-bordered"> <tr> <td>序号</td> <td>商品名称</td> <td>价格</td> <td>状态</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> </table> <h2>.table .table-bordered .table-striped(.table-striped 会有默认效果，这里我添加了自定义颜色)</h2> <table class="table table-bordered table-striped"> <tr> <td>序号</td> <td>商品名称</td> <td>价格</td> <td>状态</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> </table> <h2>.table .table-bordered .table-hover(.table-hover 会有默认效果，这里我添加了自定义颜色)</h2> <table class="table table-bordered table-hover"> <tr> <td>序号</td> <td>商品名称</td> <td>价格</td> <td>状态</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> </table> <h2>.table .table-bordered .table-hover .table-condensed</h2> <table class="table table-bordered table-hover table-condensed"> <tr> <td>序号</td> <td>商品名称</td> <td>价格</td> <td>状态</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> <tr> <td>1001</td> <td>小米手机</td> <td>1999.0</td> <td>已签收</td> </tr> </table> </div> </body> </html>
- 表格样式效果：
标签添加.table类可以为其赋予基本的样式-少量的内补(padding) 和水平方向的分隔线。
