Bootstrap全局css样式_表格

最新推荐文章于 2024-05-19 13:56:53 发布

Leon_Jinhai_Sun

最新推荐文章于 2024-05-19 13:56:53 发布

阅读量322

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Leon_Jinhai_Sun/article/details/88315782

本文详细介绍如何使用Bootstrap框架创建各种样式的表格，包括条纹状、带边框、鼠标悬停响应及紧凑型表格。同时，文章还介绍了如何利用状态类为表格行或单元格设置不同颜色，以标识成功、信息、警告和危险等状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>table表格</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
        </tbody>
      </table>
    </div>
</body>
</html>

带边框的表格

带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>table表格</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
        </tbody>
      </table>
    </div>
</body>
</html>

鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>table表格</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
    .container {
      margin-top: 10px;
    }
  </style>
</head>
<body>
    <div class="container">
      <table class="table table-bordered table-hover table-condensed">
        <thead>
          <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
        </tbody>
      </table>
    </div>
</body>
</html>

状态类

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>table表格</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
    .container {
      margin-top: 10px;
    }
  </style>
</head>
<body>
    <div class="container">
      <table class="table table-bordered table-hover table-condensed">
        <thead>
          <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
          </tr>
        </thead>
        <tbody>
          <tr class="success">
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr class="info">
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr class="warning">
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr class="danger">
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
          <tr>
            <td class="success">表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
          </tr>
        </tbody>
      </table>
    </div>
</body>
</html>