简介
Bootstrap 是开源的前端框架，包含了很多常用的组件，如表格、按钮、表单等。响应式（Responsive）是指网页能够尽可能适应不同的设备分辨率和屏幕尺寸，使内容在不同屏幕上都能够展现得很好。Bootstrap 应用广泛，而且支持响应式设计，其表格组件也不例外。
本文将介绍如何利用 Bootstrap 4 实现响应式表格。
第一步：创建表格
我们首先需要创建一个基本的表格。可以通过以下代码创建一个简单的表格：
-- -------------------- ---- -------
------ --------------
-------
----
--- ---------------------
--- ----------------------
--- ----------------------
--- ----------------------
-----
--------
-------
----
-------- --------
------------------
----------------------------
--------- -------------
-----
----
-------- --------
-----------------
----------------------------
--------- -------------
-----
--------
--------这将创建一个带着表头和表格内容的简单表格。
第二步：添加响应式特性
Bootstrap 提供了响应式的类来控制表格的外观和排列方式。可以通过以下类来实现响应式表格：
table-responsive：使表格具有响应式特性，表格会根据屏幕尺寸自适应大小。thead-dark：定义表头的颜色为暗色。thead-light：定义表头的颜色为浅色。table-striped：给表格的奇数行添加背景色的效果。table-hover：当鼠标经过表格时，表格会高亮显示。
将以上类添加到表格标签中即可，示例如下：
-- -------------------- ---- -------
---- -------------------------
------ ------------ ------------- -------------
------ -------------------
----
--- ---------------------
--- ----------------------
--- ----------------------
--- ----------------------
-----
--------
-------
----
-------- --------
------------------
----------------------------
--------- -------------
-----
----
-------- --------
-----------------
----------------------------
--------- -------------
-----
--------
--------
------这将创建一个响应式表格。当屏幕尺寸变小时，表格会自动缩小，当屏幕尺寸较小时，表格会变为可滚动的形式，更好地适应移动设备的展示。
第三步：使表格内容垂直居中
默认情况下，表格中的内容是不垂直居中的，会处于表格中央位置。使用 flexbox（弹性盒子模型） 来使表格内容垂直居中是一种好方式。
可以将以下 CSS 样式添加到表格样式中来实现：
.table tbody tr {
display: flex;
align-items: center;
}这个样式将使表格的每一行都采用 flexbox，将表格中的单元格内容在行中居中显示。
结论
通过 Bootstrap 4 的表格组件，无需重新发明轮子即可创建一个简单的响应式表格。集成弹性盒子模型也是使表格内容垂直居中的好方式。对于需要在移动设备上优秀的显示，响应式表格是必不可少的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67205b772e7021665e01e0a9