在本章节中，我们将详细介绍如何使用 Bootstrap 5 来创建和自定义表格。Bootstrap 提供了多种预设样式和功能，可以让你快速地构建出美观且功能强大的表格。
基础表格
基础表格是使用 Bootstrap 的最简单方式。只需在 <table> 元素上添加 class="table" 即可。
-- -------------------- ---- -------
------ --------------
-------
----
----------
-----------
-----------
-----------
-----
--------
-------
----
----------
-----------
-----------
-----------------------------
-----
----
----------
-----------
-----------
-------------------------
-----
--------
--------网格表格
网格表格允许你为表格的单元格设置列宽，通过将 <th> 或 <td> 元素包装在一个 .table-cell 容器中实现。
-- -------------------- ---- -------
------ ------------ ------------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-------- --------------------------------
-------- --------------------------------
-------- --------------------------------------------------
-----
----
-------- --------------------------------
-------- --------------------------------
-------- ----------------------------------------------
-----
--------
--------边框表格
边框表格在表格的每个单元格周围添加了边框。
-- -------------------- ---- -------
------ ------------ ----------------
-------
----
----------
-----------
-----------
-----------
-----
--------
-------
----
----------
-----------
-----------
-----------------------------
-----
----
----------
-----------
-----------
-------------------------
-----
--------
--------带有颜色的表格
你可以通过添加不同的类来改变表格的颜色。这些类包括 .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, 和 .table-light。
-- -------------------- ---- -------
------ --------------
-------
----
----------
-----------
-----------
-----------
-----
--------
-------
--- ----------------------
----------
-----------
-----------
-----------------------------
-----
--- ------------------------
----------
-----------
-----------
-------------------------
-----
--- ----------------------
----------
-----------
-----------
---------------------------
-----
--- ---------------------
----------
-----------
-----------
----------------------------
-----
--- ----------------------
----------
-----------
-----------
--------------------------
-----
--- -------------------
----------
-----------
-----------
---------------------------
-----
--- --------------------
----------
-----------
-----------
--------------------------
-----
--------
--------响应式表格
响应式表格允许你在小屏幕上也能查看表格的内容。你可以通过将表格包裹在一个带有 .table-responsive 类的 <div> 中来实现这一点。
-- -------------------- ---- -------
---- -------------------------
------ --------------
-------
----
----------
-----------
-----------
-----------
-----
--------
-------
----
----------
-----------
-----------
-----------------------------
-----
----
----------
-----------
-----------
-------------------------
-----
---- --- ---
--------
--------
------表格带条纹效果
条纹表格为表格的行添加了交替的颜色。通过添加类 .table-striped 可以实现这一效果。
-- -------------------- ---- -------
------ ------------ ---------------
-------
----
----------
-----------
-----------
-----------
-----
--------
-------
----
----------
-----------
-----------
-----------------------------
-----
----
----------
-----------
-----------
-------------------------
-----
---- --- ---
--------
--------表格带悬停效果
当鼠标悬停在行上时，表格会显示悬停效果。通过添加类 .table-hover 可以实现这一效果。
-- -------------------- ---- -------
------ ------------ -------------
-------
----
----------
-----------
-----------
-----------
-----
--------
-------
----
----------
-----------
-----------
-----------------------------
-----
----
----------
-----------
-----------
-------------------------
-----
---- --- ---
--------
--------带有上下文颜色的表格
除了基本的颜色外，Bootstrap 还提供了上下文颜色的表格。这些类包括 .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, 和 .table-light。
-- -------------------- ---- -------
------ --------------
-------
----
----------
-----------
-----------
-----------
-----
--------
-------
--- ----------------------
----------
-----------
-----------
-----------------------------
-----
--- ------------------------
----------
-----------
-----------
-------------------------
-----
--- ----------------------
----------
-----------
-----------
---------------------------
-----
--- ---------------------
----------
-----------
-----------
----------------------------
-----
--- ----------------------
----------
-----------
-----------
--------------------------
-----
--- -------------------
----------
-----------
-----------
---------------------------
-----
--- --------------------
----------
-----------
-----------
--------------------------
-----
--------
--------带有背景颜色的表格头
你也可以为表格的头部添加背景色。通过为 <thead> 添加 .thead-primary, .thead-secondary, .thead-success, .thead-danger, .thead-warning, .thead-info, 或 .thead-light 类来实现这一效果。
-- -------------------- ---- -------
------ --------------
------ ----------------------
----
----------
-----------
-----------
-----------
-----
--------
-------
----
----------
-----------
-----------
-----------------------------
-----
----
----------
-----------
-----------
-------------------------
-----
---- --- ---
--------
--------表格工具提示
Bootstrap 还支持为表格单元格添加工具提示。通过在单元格上添加 data-toggle="tooltip" 属性，并提供 title 属性即可实现。
-- -------------------- ---- -------
------ --------------
-------
----
----------
-----------
-----------
-----------
-----
--------
-------
----
--- --------------------- ----------------------
--- --------------------- --------------------
--- --------------------- -------------------
--- --------------------- ---------------------------------------
-----
----
--- --------------------- ----------------------
--- --------------------- --------------------
--- --------------------- -------------------
--- --------------------- -----------------------------------
-----
--------
--------
--------
---------- -- -
--------------------------------------
--
---------以上是关于 Bootstrap 5 表格的详细讲解，希望对你有所帮助！