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

Question

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

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

Answer 1

您可以使用Responsive标签来使您的页面对每个工具作出响应。如下所示：

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上完整查看时，此页面显示12列数据(GPD，利率，...，人口)，每个国家一列。随着浏览器窗口的缩小(即模拟iPad或iPhone等移动设备)，单个列逐渐减少-从12到10，然后减少到4。减少的列会发生什么情况？它们出现在一个单独的表中。

要注意的另一件事是明显使用"more“按钮来显示完整的行集(国家/地区列表)，这样一开始，移动设备上的用户就会看到可管理的行数。

多年来，我见过许多很棒的网站和书籍(例如，与datatables和UX有关)，它们讨论了其他人如何解决与您现在相同类型的问题，但我不会给出任何建议，因为方法将取决于您的设计需求。

一旦你看过其他网站是如何解决设计问题的，考虑到他们的具体数据，如何实现这一点(例如通过语义UI CSS主题或其他技术)的技术问题将更容易定义。