Bootstrap 4 提供了一些非常强大的工具来创建响应式、样式化的表格。通过简单的类，你可以实现对表格的样式、对齐、颜色、边框等的控制。下面是 Bootstrap 4 中表格相关的常用功能和示例。

1. 基本表格

最基本的表格结构是使用 <table> 标签，并加上 class="table" 类。

示例：

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>28</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

这个示例创建了一个简单的表格，其中包含表头（<thead>）和表体（<tbody>）。表格默认有一些基本的间距和边框。

2. 带边框的表格（Borders）

你可以通过 table-bordered 类为表格添加边框，使表格的所有单元格都有边框。

示例：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>28</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

3. 表格有颜色（Contextual Classes）

Bootstrap 4 允许你使用上下文类（如 table-primary、table-success 等）为表格的行或单元格添加背景色，突出显示不同的数据。

示例：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <td>1</td>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr class="table-success">
      <td>2</td>
      <td>Jane</td>
      <td>28</td>
      <td>Los Angeles</td>
    </tr>
    <tr class="table-danger">
      <td>3</td>
      <td>Mike</td>
      <td>30</td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

常用颜色类：

  • table-primary: 蓝色背景
  • table-secondary: 灰色背景
  • table-success: 绿色背景
  • table-danger: 红色背景
  • table-warning: 黄色背景
  • table-info: 青色背景
  • table-light: 浅灰色背景
  • table-dark: 深色背景

4. 表格响应式（Responsive Tables）

Bootstrap 4 的表格类支持响应式布局。你可以使用 table-responsive 类使表格在小屏幕设备上可滚动，从而避免表格内容被压缩。

示例：

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane</td>
        <td>28</td>
        <td>Los Angeles</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Mike</td>
        <td>30</td>
        <td>Chicago</td>
      </tr>
    </tbody>
  </table>
</div>

使用 table-responsive 后，表格在小于某个宽度（通常是 768px）的屏幕上会变得可以水平滚动，而不至于内容被压缩或者丢失。

5. 表格带斑马条纹（Striped Rows）

你可以通过 table-striped 类为表格行添加斑马条纹效果，帮助区分相邻的行。

示例：

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>28</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mike</td>
      <td>30</td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

6. 表格带 hover 效果（Hoverable Rows）

使用 table-hover 类，你可以使表格的每一行在鼠标悬停时显示不同的背景色。

示例：

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>28</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mike</td>
      <td>30</td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

7. 表格带边框和分割（Bordered Table with Stripes）

你可以组合 table-bordered 和 table-striped 类，为表格添加边框和斑马条纹效果。

示例：

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>28</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mike</td>
      <td>30</td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

8. 表格紧凑（Small Tables）

通过 table-sm 类，你可以让表格的大小更紧凑，减少内边距。

示例：

<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>28</td>
      <td>Los Angeles</td>


</tr>

总结

Bootstrap 4 提供了丰富的表格样式类，可以帮助你创建现代、响应式且易于维护的表格。你可以自由组合 table, table-bordered, table-striped, table-hover, table-sm, table-responsive 等类，来定制你表格的外观和行为。

如果你有更多问题，或者需要更复杂的表格样式，可以随时问我！