引言
在前端开发中，表格布局是经常用到的一种布局方式。而响应式表格布局，更是现代网页设计中不可或缺的一环。在这篇文章中，我们将会探讨如何使用 CSS Flexbox 来实现响应式的表格布局。
CSS Flexbox
CSS Flexbox 是一种新的布局模式，它可以使容器中的子元素沿着主轴和交叉轴方向运动，并自动调整它们的大小和位置。Flexbox 的思路并不是将所有元素完全拉伸或收缩，而是通过一些属性和值的控制，让容器中的元素实现自适应排列，从而达到一定的布局效果。
响应式表格布局
在普通的表格布局中，我们通常会使用<table>标签和<tr>、<td>等子元素来排列表格数据。这种布局方式对布局控制性较强，容易写出符合预期的布局，但是样式控制受限。在响应式设计中，我们需要针对不同尺寸的屏幕自适应调整表格的布局，这种情况下，CSS Flexbox 就显得尤为方便。
下面，我们将会根据屏幕尺寸的不同，分别展示两个不同的表格布局样式，以便更好理解和掌握 Flexbox 的实现。
大屏幕布局
在大屏幕上，我们使用以下的 HTML 结构来构建表格：
-- -------------------- ---- -------
---- ------------------------
---- ---------- --------
---- ---------------------
---- ---------------------
---- ---------------------
---- ---------------------
---- ---------------------
---- ---------------------
------
---- ------------
---- -----------------------
---- ---------------------
---- --------------------
---- -------------------------
---- ------------------------------
---- -----------------------------------
------
---- --- ---
------其中，父容器.table-container使用 Flexbox 布局，每一行使用.row类，每个单元格使用.cell类。我们在父容器上使用了以下的 CSS 属性：
.table-container {
display: flex;
flex-direction: column;
overflow-x: auto;
}这样设置之后，每一行就会沿着垂直方向排列，同时当子元素的宽度大于容器宽度时，会自动出现横向滚动条。
接下来，让我们来看一下如何让每一行中的单元格自适应布局。我们需要在每一行上使用以下的 CSS 属性：
.row {
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem;
}说明一下，这里的.row类是容器内子元素的一种，所以也使用了 Flexbox 布局。align-items属性用于垂直方向的对齐方式，justify-content属性用于水平方向的对齐方式。我们使用的是space-between值，表示空白部分平均分配。
最后，我们需要对单元格本身使用一些 CSS 属性调整样式：
.cell {
flex: 1;
padding: .5rem 1rem;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}其中，flex属性表示子元素所占 Flexbox 中的比例，因此我们将宽度平均分配。padding用于设定单元格内边距，text-align是文字水平对齐方式，overflow和white-space是在单元格文字溢出时的处理方式，text-overflow为文字溢出时的省略号样式设定。
以上 CSS 属性的设定，可以使得大屏幕上的表格布局可以自适应，和滚动。
小屏幕布局
在小屏幕上，我们需要对表格进行另外一种布局。由于空间有限，我们需要将表头和表内容另行处理，以便于压缩排版。
以下是 HTML 结构：
-- -------------------- ---- -------
---- ---------------------------
---- ------------------
---- ---------------------
---- ---------------------
------
---- ------------
---- -----------------------
---- ---------------------
------
---- --- ---
------可以看到，我们在 HTML 结构上做了两个调整：将表头和表内容分开，并且只保留了两个单元格。
以下是 CSS 属性的设定：
-- -------------------- ---- -------
------------------- -
----------- -----
-
---------- -
-------- -----
---------- -----
-------- ------
-
----- -
-------- ----- -----
----------- -------
--------- -------
------------ -------
-------------- ---------
-
------ ---- ------ --- ----------- ------ -
------------------- -
-------- -----
--------------- -------
-
---- -
-------- -----
---------- -----
-------- ------
-
----- -
----- --
----------- -----
-
---------- -
---------- -------
-
-代码中用到了响应式设计。例如，@media 媒体查询指定了在屏幕宽度小于 768px 的情况下，应该使用的 CSS 属性设定。.flex-direction表示 Flexbox 的方向，flex-wrap用于多行时的元素换行，flex用于表示占用的比例。可以看到，新的设定让表格可以更好地适应小屏幕。
总结
通过对 CSS Flexbox 的学习，我们可以轻松地实现响应式的表格布局。在不同的屏幕尺寸下，通过前面的示例代码，我们可以看到表格布局也可以变得更加美观和可读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65010d5495b1f8cacdedf1c6