功能比较表的响应解决方案

关键要点

• 响应式网页设计和表格并非完美契合，但由于其结构稳定，功能比较表格仍有改进空间。
• 成功的响应式功能比较表格应轻松区分产品、清晰标识功能，并显示产品功能是否存在。
• 创建响应式功能比较表格的两种方案包括：使用 Flexbox（现代浏览器支持率超过 80%，包括需要前缀的浏览器版本在内支持率达 93%）和使用额外的标记和 ARIA 角色（更适合旧版 Android 和 iOS）。
• 无论选择哪种方案，在设计响应式功能比较表格时，都必须考虑可读性、可访问性和可用性，确保其对所有用户（包括残疾用户）友好且易于访问。

响应式网页设计与表格并非最佳拍档。许多人对此进行了研究，并设计了许多方法（其中一些方法最近在 SitePoint 上的一篇文章中进行了总结）。然而，我们距离完美的解决方案还有很长的路要走，搜索仍在继续。

虽然通用情况仍然很复杂，但某些特定情况可以得到更多关注。我在这里谈论的是功能比较表。我们在许多地方都能遇到它——在选择汽车并试图决定选择哪些额外选项时；在比较套餐和功能的网站托管网站上；在任何允许您决定需要哪些功能以换取金钱的基于会员制的门户网站上。

由于这种表格具有相对稳定和一致的结构，因此在小屏幕上显示时，可以更好地控制其行为。

功能比较表的结构

经典的比较表将至少三个产品（显示在列中）放在一起，而功能则显示在下面的行中。在传统结构中，每行的第一个单元格包含功能的名称，而每个产品下的单元格则包含复选标记或其他一些符号，显示该功能是否属于该产品。我们可以找到这种经典结构的绝佳示例：这里、这里和这里。

根据这些示例，我们可以使用以下代码总结比较表的结构：

<table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table>

很容易识别前面提到的元素：产品名称、功能名称以及显示功能是否存在或不存在的标记。请注意，✔ 代码表示复选标记 (✔) 字符。

现在我们来到了问题的根源。为了使表格在低屏幕宽度下保持最佳效率，必须满足以下几个条件：

• 用户必须能够轻松区分产品；
• 功能必须易于识别；并且
• 必须清楚产品的功能是否存在。

实现此结果的最佳方法是将包含功能名称的单元格移到标记功能存在或不存在的其他三个单元格的顶部。

方案一：Flexbox

我们如何做到这一点？一个答案是 Flexbox。如果您不知道 Flexbox 是什么，或者需要复习一下，您可以查看 Nick Salloum 最近关于此主题的文章。我们其他人可以深入研究解决方案。

首先，我们需要确保我们的更改仅在小屏幕上发生。为此，我们使用媒体查询来定位我们的代码，使用 768 像素的经典宽度作为断点：

<table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table>

这组规则中有一些重要的事情可以实现神奇的效果：

• 我们将表格行的 display 值更改为 flex，并告诉其子元素以行方式均匀分布。
• 接下来，我们指示单元格采用 display:block 来将它们规范化为普通容器（保留默认值会带来表格规则的干扰，尤其是在大小方面）。
• 下一步是定位每行中的第一个单元格，使其宽度为 100%，并更改背景颜色，以增强对比度。流程规则使其保持在其他三个单元格的顶部——这正是我们需要的。
• 我们通过隐藏第一个 th 来完成更改，这样产品名称上方就不会显示任何内容。

此处可以查看演示。

显然，解决方案的有效性仅取决于其支持程度。根据 caniuse.com 的数据，对于大多数现代变体，Flexbox 的支持率超过 80%，如果我们包括需要前缀或使用规则的先前版本的浏览器版本，则支持率超过 93%。IE 的支持从 IE10 开始（只有 2012 年的语法），而 IE11 则完全支持。因为我们主要关注小屏幕上的支持，所以我们可以忽略对先前 IE 版本的支持缺乏。在移动方面，支持从 Android 4.4 和 iOS 7.1 开始。以前的版本需要供应商前缀并且不支持 wrap 功能。

您还应该提供后备方案，例如 Bootstrap 中使用的滚动 div。这样，超出支持范围的访问者仍然会有另一种显示替代方案。

方案二：额外的标记 ARIA 角色

如果您要支持的大部分浏览器都不支持 Flexbox，则存在替代方案。事实上，这是我在 2013 年的一个真实项目中使用的解决方案。我们需要一些额外的标记：我们必须添加一行额外的行，复制功能名称。虽然手工操作可能显得乏味，但如果从数据源读取信息，则可以自动完成。最后，我们初始示例中的代码应如下所示：

@media screen and (max-width: 768px) {
  tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  td, th {
    display: block;
    width: 33%;
  }

  th:first-child,
  td:first-child {
    text-align: center;
    background: #efefef;
    width: 100%;
  }

  th:first-child {
    display: none;
  }
}

CSS 也非常简单：

<table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 1</td>
    </tr>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 2</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 3</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 4</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table>

为了提高可访问性，我们可以更进一步，使用 aria-hidden="true" 从屏幕阅读器中隐藏额外的标记。这样，那些尊重 aria-hidden 规范的屏幕阅读器应用程序就不会两次读取重复的内容。

这是第二个解决方案的演示。

结论

我们在这里找到了两种方法来使比较表真正具有响应性。两者都有其优缺点。最终，选择的方案应取决于您的受众群体。对于大多数情况，第一个选项（带有后备方案）应该足够了。如果您确实需要迎合旧版 Android 和 iOS，您可以部署第二个选项。无论哪种方式，从现在开始，您的功能比较表看起来都会好得多，无论屏幕尺寸如何。

(此处省略了原文档中的FAQ部分，因为该部分内容与伪原创目标不符，且篇幅过长。如果需要，可以单独处理FAQ部分的伪原创。)

以上是功能比较表的响应解决方案的详细内容。更多信息请关注PHP中文网其他相关文章！