Bootstrap 表格样式-Table

卡尔特斯
701 阅读2分钟
  • 表格样式
    • .table：为任意 标签添加.table类可以为其赋予基本的样式-少量的内补(padding) 和水平方向的分隔线。
    • .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>
      • 表格样式效果：

avatar
文章
阅读
粉丝