Bootstrap5 表格

以下是关于 Bootstrap 5 表格（Tables） 的详细指南，包含目录、内部锚链接、出站链接和参考资料。我将从基本概念、使用方法到高级功能逐一讲解，帮助您快速掌握 Tables 的使用。

Bootstrap 5 表格（Tables）指南

什么是 Tables

Tables 是 Bootstrap 5 提供的一种组件，用于以表格形式展示数据。它通过类增强了 HTML <table> 元素的样式和功能，支持变体、条纹、边框、响应式等特性，适用于展示结构化数据。

出站链接：查看 Bootstrap 5 Tables 官方文档。

基本使用

HTML 结构

Tables 使用 <table> 标签，结合 .table 类增强样式。

基本示例

以下是一个简单的表格示例：

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

.table：基础表格样式。
scope：提升可访问性，标识行列作用范围。

高级用法

表格变体

通过 .table-* 类调整表格颜色。

示例代码：

<table class="table table-primary">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
    </tr>
  </tbody>
</table>

可选变体：.table-primary、.table-success、.table-danger、.table-warning、.table-info、.table-light、.table-dark。

条纹表格

通过 .table-striped 添加条纹效果。

示例代码：

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>李四</td>
    </tr>
  </tbody>
</table>

边框表格

通过 .table-bordered 添加边框。

示例代码：

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
    </tr>
  </tbody>
</table>

.table-borderless：移除边框。

悬停效果

通过 .table-hover 添加行悬停高亮。

示例代码：

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>李四</td>
    </tr>
  </tbody>
</table>

响应式表格

通过包裹 <div class="table-responsive"> 实现滚动表格。

示例代码：

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
        <th scope="col">城市</th>
        <th scope="col">职业</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
        <td>工程师</td>
      </tr>
    </tbody>
  </table>
</div>

支持断点变体：.table-responsive-sm、.table-responsive-md 等。

表头样式

通过 .table-dark 或 .thead-light 调整表头外观。

示例代码：

<table class="table">
  <thead class="table-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
    </tr>
  </tbody>
</table>

自定义样式

通过 CSS 调整表格外观。

示例代码：

<style>
  .custom-table {
    border: 2px solid #007bff;
    border-radius: 10px;
  }
  .custom-table th {
    background-color: #007bff;
    color: #fff;
  }
</style>

<table class="table custom-table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
    </tr>
  </tbody>
</table>

注意事项

依赖性：Tables 不需 JavaScript，仅依赖 CSS。
可访问性：使用 scope 和 role 属性提升屏幕阅读器支持。
数据量：大量数据可能需要分页或虚拟滚动（需额外实现）。
响应式：.table-responsive 在小屏幕上可能影响可读性，需测试。

参考资料

以下是与 Bootstrap 5 Tables 相关的外部资源：

总结

Bootstrap 5 的 Tables 提供了一个强大且灵活的方式来展示数据，支持变体、条纹、边框和响应式设计。通过简单的类和自定义 CSS，您可以轻松创建美观的表格。如果您有具体问题或场景，请随时告诉我！