时间戳

首页 > 解决方案 > 如何在 Semantic-UI-React 中使表格响应？

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

问题描述

现在我有一张又长又宽的桌子。它占据了网格中的所有 16 个点，看起来不错，但是当我将一些数据覆盖到Table.cell. 它可以打破桌子的宽度。像这样：

在此处输入图像描述

任何机构都可以帮我解决这个问题吗？

 <Table>
  <Table.Body>
    <Table.Row>
      <Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>
      Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
      </Responsive>
      <Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd</Responsive>
      <Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>
        <Responsive
          as={Table.Cell}
          minWidth={Responsive.onlyMobile.minWidth}
        >
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
          Bazfasdfssafsdsdddddddddddddddddddddddddddddddddddddd
        </Responsive>
      </Responsive>
    </Table.Row>
  </Table.Body>
</Table>

标签： javascriptreactjsecmascript-6semantic-ui-react

解决方案

您是否尝试过添加style={{ overflow: auto }}到<Table.body />

推荐阅读