响应式布局进阶篇：响应式表格

作者 | Brilliant Open Web团队

编辑 | Brilliant Open Web团队

本文继续在响应式布局上深入讨论，主要通过多个实际例子，探讨表格在不同设备下的响应式布局方式，以提供良好的用户体验。

当我们有大量结构化数据需要在页面上展现时，通常会使用表格。但如果表格的列超过一定数量，它们很有可能会溢出视口。在视口较窄的设备上，较宽的表格可能会强迫用户通过水平滚动才能浏览全部内容。有一些办法能优化这个问题，接下来我们会由易到难，介绍多种响应式表格的布局方式，分别是 隐藏表格列 、 表格容器内滚动 、 表格重组 和 固定表格行列 。

固定列示意图

隐藏表格列

对于表格展现的数据来说，可能不是每一列都十分重要。我们可以通过媒体查询，在视口较窄的时候，隐藏表格里一些不太重要的信息。

@media screen and (max-width: 599px) {

.non-critical-col {

display: none;

}

}

隐藏表格列通过一个很直接的方式，使得表格能在窄视口设备上较好地展现。这样做最大的问题是，向用户隐藏了一部分结构化数据。如果用户确实需要获取这些数据，那他们别无选择，只能更换设备浏览了。所以，隐藏表格列需要谨慎，如果有可能，可以尝试使用缩写来展示数据。

表格容器内滚动

另一个比较简单的响应式表格实现是，把表格放在一个容器里，仅使该容器在水平方向可滚动。

<div class="table-container">

<table>

<!-- ... -->

</table>

</div>

.table-container {

width: 100%;

overflow: auto;

}

仅使表格在容器滚动，可以避免页面出现水平滚动条，从而影响整个页面的浏览体验，同时也兼顾了表格数据展现的完整性。

表格重组

将表格的每一列转换为一行，可以将表格转换为普通的列表来展现。表格进行重组后，表头位于列表的最左边一列。我们可以通过媒体查询实现表格重组。

表格重组示意图

@media screen and (max-width: 599px) {

table {

border-spacing: 0;

}

table, tbody, tr, th, td {

display: block;

}

thead { /* 隐藏真实表头 */

display: none;

}

tr {

border-bottom: 1px solid #e0e0e0;

}

td {

position: relative;

height: 28px;

padding-left: 50%; /* 数据列左边留 50% 空间给新的表头 */

border-bottom: 1px solid #e0e0e0;

text-align: center;

background: #fff;

}

td::before {

content: attr(data-th); /* 使用 data-th 属性生成新的表头 */

position: absolute;

left: 25%;

transform: translateX(-50%); /* left 与 transform 配合实现表头居中 */

font-weight: 700;

}

}

<table>

<thead>

<tr>

<th>Name</th>

<th>1st</th>

<th>2nd</th>

<th>3rd</th>

<th>4th</th>

<th>5th</th>

<th>Total</th>

</tr>

</thead>

<tbody>

<tr>

<td data-th="Name">Alice</td>

<td data-th="1st">0</td>

<td data-th="2nd">0</td>

<td data-th="3rd">1</td>

<td data-th="4th">0</td>

<td data-th="5th">4</td>

<td data-th="Final">5</td>

</tr>

<tr>

<td data-th="Name">Bob</td>

<td data-th="1st">0</td>

<td data-th="2nd">2</td>

<td data-th="3rd">0</td>

<td data-th="4th">4</td>

<td data-th="5th">0</td>

<td data-th="Final">6</td>

</tr>

</tbody>

</table>

表格重组的好处是，所有数据在视口内都是可展现的，不需要用户进行水平滚动。但这破坏了表格的原始组织形式，用户可能会感觉到数据展示不够直观。

固定表格行列

通过 position: sticky 可以使表格的行列固定，从而这些行列不会在滚动时移出视口。如下面的例子中，固定了表格的第一列和最后一列，其他列可以通过水平滚动来浏览。

表格列固定示意图

.table-container {

width: 100%;

overflow: auto; /* 使表格在容器内滚动 */

}

.table {

/* 表格共有七列，视口内始终展示五列 */

/* 包括头尾固定的两列以及中间三列，每列占 20vw 宽度 */

width: 140vw;

border-spacing: 0;

}

.table tr {

height: 56px;

}

.table th,

.table td {

width: 20vw; /* 表格每列的宽度 */

border-bottom: 1px solid #e0e0e0;

text-align: center;

background: #fff;

}

.table-sticky {

position: sticky; /* 使表格列固定 */

z-index: 1;

}

.table-sticky:first-child {

left: 0; /* 表格第一列固定在最左边 */

border-right: 1px solid #e0e0e0;

}

.table-sticky:last-child {

right: 0; /* 表格最后一列固定在最右边 */

border-left: 1px solid #e0e0e0;

}

<div class="table-container">

<table class="table">

<thead>

<tr>

<th class="table-sticky">Name</th>

<th>1st</th>

<th>2nd</th>

<th>3rd</th>

<th>4th</th>

<th>5th</th>

<th class="table-sticky">Final</th>

</tr>

</thead>

<tbody>

<tr>

<td class="table-sticky">Alice</td>

<td>0</td>

<td>0</td>

<td>1</td>

<td>0</td>

<td>4</td>

<td class="table-sticky">5</td>

</tr>

<tr>

<td class="table-sticky">Bob</td>

<td>0</td>

<td>2</td>

<td>0</td>

<td>4</td>

<td>0</td>

<td class="table-sticky">6</td>

</tr>

</tbody>

</table>

</div>

固定表格行列是一种比较优雅的解决方案，既能按照数据列的重要性展示内容，又不会造成数据缺失。在这种情况下，少量的水平滚动应该可以接受。

总结

本文首先介绍了表格在移动端下遇到的问题，随后通过四种方式，详细介绍了编写响应式表格的一些技巧。开发者可以根据实际情况，利用其中几种方式，优化不同尺寸设备呈现的表格内容，为用户提供更好的体验。但我们也可以发现，无论是哪种响应式表格，在移动端下都有一定的局限性。如果使用图表代替表格，或许会得到更好的数据展现效果。

本文内容主要来自开源书籍 《PWA 应用实战》 。该书由百度 Web 生态团队撰写与分享，记录了团队过去两年积累的 PWA 方面的经验，欢迎对 Web 和 PWA 有浓厚兴趣的读者加入我们，一起来维护这本书。