Bootstrap 表格

2018-03-20 18:19 更新

HTML表格以网格格式呈现数据。

下表列出了Bootstrap支持的各种元素。

标签	描述
<table>	封装元素，用于以表格格式显示数据
<thead>	容器元素，用于标记表格列的表格标题行（<tr>）
<tbody>	容器元素，用于表格主体中的表格行（<tr>）
<tr>	容器元素，用于显示在单个行上的一组表格单元格（<td>或<th>）
<td>	默认表格单元格
<th>	特殊表格单元格，用于标识列（或行，具体取决于范围和位置）。必须在<thead>内使用
<caption>	关于表格存储内容的描述或总结。

基础表格样式

如果你想要一个美观的、基础的表格样式，只带有一些浅的填充和水平分隔线，可添加.table的基类到任意表格。这些基本布局在所有<td>元素上都有顶部边框:

<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">

  <table class="table">
    <caption>This is the caption.</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>


</body>
</html>

对于基础样式是：只有浅填充和水平分隔符 - 将基类.table添加到任意<table>。

边框表格

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

<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">

  <table class="table table-bordered">
    <caption>This is the caption.</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

紧缩表格

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

<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">

  <table class="table table-condensed">
    <caption>This is the caption.</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

上下文表格类

使用上下文表格类来对表格行或单个单元格设置颜色。

类	描述
.success	表示成功或正确的动作
.danger	表示危险或潜在的负面的动作
.warning	表示用户需要注意的警告
.active	将悬停颜色应用于特定的行或单元格

<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">

     <table class="table table-condensed">
          <caption>This is the caption.</caption>
          <thead>
               <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
               </tr>
          </thead>
          <tbody>
               <tr class="success">
                    <td>Data 1</td>
                    <td>Data 2</td>
               </tr>
               <tr class="danger">
                    <td>Data 1</td>
                    <td>Data 2</td>
               </tr>
               <tr class="active">
                    <td>Data 1</td>
                    <td>Data 2</td>
               </tr>
               <tr class="warning">
                    <td>Data 1</td>
                    <td>Data 2</td>
               </tr>
               <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
               </tr>
          </tbody>
     </table>

</body>
</html>

悬停行

添加.table-hover以在<tbody>中的表格行上启用悬停状态。

<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">

  <table class="table table-hover">
    <caption>This is the caption.</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

条纹状表格

使用.table-striped在<tbody>中的任意表格行中添加斑马条纹样式。

<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">

  <table class="table table-striped">
    <caption>This is the caption.</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

响应式表格

我们可以创建响应式表格，以便在小屏幕设备（<768px）上启用滚动功能。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="table-responsive"> 
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Row ID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Biography</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John</td>
                    <td>Carter</td>
                    <td>j@mail.com</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Peter</td>
                    <td>Parker</td>
                    <td>p@mail.com</td>
                    <td>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque.</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Tom</td>
                    <td>Smith</td>
                    <td>j@mail.com</td>
                    <td>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

以上内容是否对您有帮助：