表格 (Tables)

Bootstrap 5 官方文档

1. 创建表格

(1). 使用原生的表格标签

<table>
    <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>

(2). 使用Bootstrap 5 的提供的表格标签类

<table class="table">
    <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>

官方提供的写法

<table class="table">
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>

(3). 原生与Bootstrap创建出来的表格的对比

  <table>
    <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>
  <table class="table">
    <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>
  <table class="table">
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>

两种写法无明显区别

2. 表格颜色样式

(1). 表格颜色样式的效果

效果如下图:

  <table class="table">
    <thead>
    <tr>
      <th scope="col" >#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">第一行</th>
      <td class = "table-primary">table-primary</td>
      <td class = "table-secondary">table-secondary</td>
      <td class = "table-success">table-success</td>
    </tr>
    <tr>
      <th scope="row">第二行</th>
      <td class = "table-danger">table-danger</td>
      <td class = "table-warning">table-warning</td>
      <td class = "table-info">table-info</td>
    </tr>
    <tr>
      <th scope="row">第三行</th>
      <td class = "table-light">table-light</td>
      <td class = "table-dark">table-dark</td>
      <td>默认</td>
    </tr>
    </tbody>
  </table>

(2). 表格颜色样式的使用

1). 用于 <table> 标签

使得整个表格设置为指定的样式

<table class="table table-success" >
    <thead >
    <tr>
      <th scope="col">#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <th scope="col" >#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tfoot>
  </table>

2). 用于 <thead> <tbody> <tfoot> 标签

使得整个区域内的所有元素都设置为指定的样式

  <table class="table">
    <thead class = "table-primary">
    <tr>
      <th scope="col" >#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody class = "table-secondary">
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tbody>
    <tfoot class = "table-danger">
    <tr>
      <th scope="col" >#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tfoot>
  </table>

3). 用于 <th> <tr> <td> 标签

在<th>标签中使用, 整个表头会应用指定的样式
在<tr>标签中使用, 表格该行会应用指定的样式
在<td>标签中使用, 该单元格会应用指定的样式

  <table class="table">
    <thead>
    <tr class = "table-primary">
      <th scope="col" >#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row" class = "table-secondary">#</th>
      <th scope="col" class = "table-secondary">x</th>
      <th scope="col" class = "table-secondary">x</th>
    </tr>
    </tbody>
    <tfoot class = "table-danger">
    <tr  class = "table-danger">
      <th scope="col" >#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tfoot>
  </table>

3. 表格突出样式 (Accented tables)

(1). 表格条纹样式 class = “table-striped”

在<table>标签中使用类 .table-striped, 可以给表格增加条纹样式

    <table class="table table-striped" >
    <thead>
    <tr class = "table-primary">
      <th scope="col" >#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tbody>
  </table>

(2). 表格鼠标悬浮样式 class = “table-hover”

  在<table>标签中使用类 .table-hover, 可以给表格增加鼠标悬浮样式, 即当用户鼠标悬浮在表格某列时, 该列会出现深色样式

  <table class="table table-hover" >
    <thead>
    <tr class = "table-primary">
      <th scope="col" >#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tbody>
  </table>

(3). 表格单元格强调样式 class = “table-active”

在<table>标签中使用, 整个表格会应用强调样式
在<thead> <tbody> <tfoot>标签中使用, 整个区域会应用强调样式
在<th>标签中使用, 整个表头会应用强调样式
在<tr>标签中使用, 表格该行会应用强调样式
在<td>标签中使用, 该单元格会应用强调样式

  <table class="table">
    <thead>
    <tr class = "table-primary">
      <th scope="col" class = "table-active">#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody >
    <tr  class = "table-active">
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tbody>
  </table>

4. 表格边框 (Table borders)

(1). 默认边框 class = “table-bordered”

  <table class="table table-bordered">
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody >
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tbody>
  </table>

(2). 无边框 class = “table-borderless”

    <table class="table table-borderless">
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>

(3). 表格边框样式

 <table class="table table-bordered border-success">
   <thead>
   <tr>
     <th scope="col">#</th>
     <th scope="col">标题</th>
     <th scope="col">标题</th>
   </tr>
   </thead>
   <tbody >
   <tr>
     <th scope="row">#</th>
     <th scope="col">x</th>
     <th scope="col">x</th>
   </tr>
   <tr>
     <th scope="row">#</th>
     <th scope="col">x</th>
     <th scope="col">x</th>
   </tr>
   <tr>
     <th scope="row">#</th>
     <th scope="col">x</th>
     <th scope="col">x</th>
   </tr>
   </tbody>
 </table>

5. 紧凑表格样式 (Small tables)

使用.table-sm类，可以将所有单元格填充减半, 使表格更紧凑。

上图中, 下方的表格为紧凑的

<div class = "container">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>
    <table class="table table-bordered table-sm">
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>
  </div>

6. 表格内容在垂直方向的排版 (Vertical alignment)

  默认情况下, <thead>标签中的内容是居下的, <tbody>标签中的内容是居顶的

  <div class = "container">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>
  </div>

CSS

  tr {
    height: 100px;
  }
  td {
    height: 50px;
  }

(1). 居上 class = “align-top”

(2). 居中 class = “align-middle”

(3). 居下 class = “align-bottom”

  <div class = "container">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th scope="col" class = "align-top">align-top</th>
        <th scope="col" class = "align-middle">align-middle</th>
        <th scope="col" class = "align-bottom">align-bottom</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row" class = "align-top">align-top</th>
        <th scope="col" class = "align-middle">align-middle</th>
        <th scope="col" class = "align-bottom">align-bottom</th>
      </tr>
      <tr>
        <th scope="row" class = "align-top">align-top</th>
        <th scope="col" class = "align-middle">align-middle</th>
        <th scope="col" class = "align-bottom">align-bottom</th>
      </tr>
      </tbody>
    </table>
  </div>

CSS

  tr {
    height: 100px;
  }
  td {
    height: 50px;
  }

7. 表格嵌套 (Nesting)

表格中的某个单元格还是一个表格

  <div class = "container">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">
          <table class="table table-bordered">
            <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">标题</th>
              <th scope="col">标题</th>
            </tr>
            </thead>
            <tbody >
            <tr>
              <th scope="row">#</th>
              <th scope="col">x</th>
              <th scope="col">x</th>
            </tr>
            <tr>
              <th scope="row">#</th>
              <th scope="col">x</th>
              <th scope="col">x</th>
            </tr>
            <tr>
              <th scope="row">#</th>
              <th scope="col">x</th>
              <th scope="col">x</th>
            </tr>
            </tbody>
          </table>
        </th>
        <th scope="col">
          <table class="table table-bordered">
            <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">标题</th>
              <th scope="col">标题</th>
            </tr>
            </thead>
            <tbody >
            <tr>
              <th scope="row">#</th>
              <th scope="col">x</th>
              <th scope="col">x</th>
            </tr>
            <tr>
              <th scope="row">#</th>
              <th scope="col">x</th>
              <th scope="col">x</th>
            </tr>
            <tr>
              <th scope="row">#</th>
              <th scope="col">x</th>
              <th scope="col">x</th>
            </tr>
            </tbody>
          </table>
        </th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>
  </div>

8. 表格标题 (Captions)

使用<caption>标签设置标题, 默认情况, 标题在最下面

  <div class = "container">
    <table class="table table-bordered">
      <caption>表格标题</caption>
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>
  </div>

(1). 标题在表格上方 class = “caption-top”

  在<table>标签 或 <captain>标签 中使用.caption-top类, 可以让表格标题显示在表格上方

  <div class = "container">
    <table class="table table-bordered caption-top">
      <caption>表格标题</caption>
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>
  </div>

(2). 标题在表格下方 (默认方式)

默认情况下, 表格标题显示在表格下方

9. 响应式表格 (Responsive tables)

(1). 表格宽度总是随视口宽度的变化而变化 class = “table-responsive “

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

(2). 使用断点指定表格宽度变化 .table-responsive{-sm|-md|-lg|-xl|-xxl}

.table-responsive{-sm|-md|-lg|-xl|-xxl}

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>