在本章节中，我们将详细介绍如何使用 Bootstrap 5 来创建和自定义表格。Bootstrap 提供了多种预设样式和功能，可以让你快速地构建出美观且功能强大的表格。
基础表格
基础表格是使用 Bootstrap 的最简单方式。只需在 <table> 元素上添加 class="table" 即可。
// www.javascriptcn.com code example
<table class="table">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>30</td>
<td>zhangsan@example.com</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>28</td>
<td>lisi@example.com</td>
</tr>
</tbody>
</table>网格表格
网格表格允许你为表格的单元格设置列宽，通过将 <th> 或 <td> 元素包装在一个 .table-cell 容器中实现。
// www.javascriptcn.com code example
<table class="table table-grid">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="table-cell">张三</div></td>
<td><div class="table-cell">30</div></td>
<td><div class="table-cell">zhangsan@example.com</div></td>
</tr>
<tr>
<td><div class="table-cell">李四</div></td>
<td><div class="table-cell">28</div></td>
<td><div class="table-cell">lisi@example.com</div></td>
</tr>
</tbody>
</table>边框表格
边框表格在表格的每个单元格周围添加了边框。
// www.javascriptcn.com code example
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>30</td>
<td>zhangsan@example.com</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>28</td>
<td>lisi@example.com</td>
</tr>
</tbody>
</table>带有颜色的表格
你可以通过添加不同的类来改变表格的颜色。这些类包括 .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, 和 .table-light。
// www.javascriptcn.com code example
<table class="table">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>1</td>
<td>张三</td>
<td>30</td>
<td>zhangsan@example.com</td>
</tr>
<tr class="table-secondary">
<td>2</td>
<td>李四</td>
<td>28</td>
<td>lisi@example.com</td>
</tr>
<tr class="table-success">
<td>3</td>
<td>王五</td>
<td>45</td>
<td>wangwu@example.com</td>
</tr>
<tr class="table-danger">
<td>4</td>
<td>赵六</td>
<td>22</td>
<td>zhaoliu@example.com</td>
</tr>
<tr class="table-warning">
<td>5</td>
<td>孙七</td>
<td>35</td>
<td>sunqi@example.com</td>
</tr>
<tr class="table-info">
<td>6</td>
<td>周八</td>
<td>29</td>
<td>zhouba@example.com</td>
</tr>
<tr class="table-light">
<td>7</td>
<td>吴九</td>
<td>40</td>
<td>wujiu@example.com</td>
</tr>
</tbody>
</table>响应式表格
响应式表格允许你在小屏幕上也能查看表格的内容。你可以通过将表格包裹在一个带有 .table-responsive 类的 <div> 中来实现这一点。
// www.javascriptcn.com code example
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>30</td>
<td>zhangsan@example.com</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>28</td>
<td>lisi@example.com</td>
</tr>
<!-- 更多行 -->
</tbody>
</table>
</div>表格带条纹效果
条纹表格为表格的行添加了交替的颜色。通过添加类 .table-striped 可以实现这一效果。
// www.javascriptcn.com code example
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>30</td>
<td>zhangsan@example.com</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>28</td>
<td>lisi@example.com</td>
</tr>
<!-- 更多行 -->
</tbody>
</table>表格带悬停效果
当鼠标悬停在行上时，表格会显示悬停效果。通过添加类 .table-hover 可以实现这一效果。
// www.javascriptcn.com code example
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>30</td>
<td>zhangsan@example.com</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>28</td>
<td>lisi@example.com</td>
</tr>
<!-- 更多行 -->
</tbody>
</table>带有上下文颜色的表格
除了基本的颜色外，Bootstrap 还提供了上下文颜色的表格。这些类包括 .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, 和 .table-light。
// www.javascriptcn.com code example
<table class="table">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>1</td>
<td>张三</td>
<td>30</td>
<td>zhangsan@example.com</td>
</tr>
<tr class="table-secondary">
<td>2</td>
<td>李四</td>
<td>28</td>
<td>lisi@example.com</td>
</tr>
<tr class="table-success">
<td>3</td>
<td>王五</td>
<td>45</td>
<td>wangwu@example.com</td>
</tr>
<tr class="table-danger">
<td>4</td>
<td>赵六</td>
<td>22</td>
<td>zhaoliu@example.com</td>
</tr>
<tr class="table-warning">
<td>5</td>
<td>孙七</td>
<td>35</td>
<td>sunqi@example.com</td>
</tr>
<tr class="table-info">
<td>6</td>
<td>周八</td>
<td>29</td>
<td>zhouba@example.com</td>
</tr>
<tr class="table-light">
<td>7</td>
<td>吴九</td>
<td>40</td>
<td>wujiu@example.com</td>
</tr>
</tbody>
</table>带有背景颜色的表格头
你也可以为表格的头部添加背景色。通过为 <thead> 添加 .thead-primary, .thead-secondary, .thead-success, .thead-danger, .thead-warning, .thead-info, 或 .thead-light 类来实现这一效果。
// www.javascriptcn.com code example
<table class="table">
<thead class="thead-primary">
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>30</td>
<td>zhangsan@example.com</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>28</td>
<td>lisi@example.com</td>
</tr>
<!-- 更多行 -->
</tbody>
</table>表格工具提示
Bootstrap 还支持为表格单元格添加工具提示。通过在单元格上添加 data-toggle="tooltip" 属性，并提供 title 属性即可实现。
// www.javascriptcn.com code example
<table class="table">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td data-toggle="tooltip" title="这是第一个数据">1</td>
<td data-toggle="tooltip" title="这是张三">张三</td>
<td data-toggle="tooltip" title="30岁">30</td>
<td data-toggle="tooltip" title="张三的邮箱">zhangsan@example.com</td>
</tr>
<tr>
<td data-toggle="tooltip" title="这是第二个数据">2</td>
<td data-toggle="tooltip" title="这是李四">李四</td>
<td data-toggle="tooltip" title="28岁">28</td>
<td data-toggle="tooltip" title="李四的邮箱">lisi@example.com</td>
</tr>
</tbody>
</table>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>以上是关于 Bootstrap 5 表格的详细讲解，希望对你有所帮助！