如何在 Semantic-UI-React 中使表格响应？

Question

现在我有一张又长又宽的桌子。它占据了网格中的所有 16 个点，在桌面上看起来不错。但是，当我在移动设备上查看它时，它会拉伸整个页面。我似乎不明白如何使它具有响应性，以便它适合移动视图。

有人有这方面的经验并设法做到了吗？

Answer 1

您可以使用响应式标签使您的页面对每个工具都具有响应性。 像这样：

const App = () => (
  <Container>
    <Table>
      <Table.Body>
        <Table.Row>
          <Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>
            Foo
          </Responsive>
          <Table.Cell>Bar</Table.Cell>
          <Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>
            <Responsive
              as={Table.Cell}
              minWidth={Responsive.onlyMobile.minWidth}
            >
              Baz
            </Responsive>
          </Responsive>
        </Table.Row>
      </Table.Body>
    </Table>
  </Container>
);

Answer 2

在考虑此问题的技术方面之前，您需要考虑您希望实现的用户体验 - 这取决于您提供的数据的性质以及如何将这些数据有意义地提供给您的用户。换句话说，在您了解实现该设计的技术方面之前，有一个艰巨的设计挑战需要解决。

假设您的表格是关于经济数据的，有 20 个不同的经济统计数据作为列标题和 600 行月度记录，您希望您的用户在从移动设备访问您的网站时最初看到什么？你能把这张大桌子分成几张小桌子以便在手机上查看吗？

看看其他网站是如何解决这个问题的。一个很好的例子是https://tradingeconomics.com 的首页。

在我的 Macbook Pro 上完整查看时，此页面显示十二列数据（GPD、利率、...、人口），每个国家/地区都有一列。当您缩小浏览器窗口（即模拟 iPad 或 iPhone 等移动设备）时，各个列逐渐下降 - 从 12 到 10，然后到 4。下降的列会发生什么情况？它们出现在单独的表格中。

另外需要注意的是明显使用“更多”按钮来显示完整的行集（国家/地区列表），以便最初向移动设备上的用户呈现可管理的行数。

多年来，我看到了各种很棒的网站和书籍（例如与数据表和 UX 相关的），它们讨论了其他人如何解决您现在遇到的相同类型的问题，但我不会提出任何建议，因为方法将取决于您的设计需求。

一旦您了解了其他网站是如何解决设计问题的，鉴于他们的具体数据，如何实现这一点的技术问题（例如通过语义 UI CSS 主题或其他技术）将更容易定义。