如何在不使用表格格式化的情况下呈现获取的数据？答案

【问题标题】：How can I render my fetched data without using tables to format it?如何在不使用表格格式化的情况下呈现获取的数据？
【发布时间】：2020-02-23 15:56:38
【问题描述】：

所以我正在尝试对齐我获取的 JSON 数据。

我需要的是使数据与每个属性标题对齐，而不使用下图所示的表格。

有一张桌子我可以做到，但没有我似乎找不到办法。

我的表格示例：

export default function UserDetails({ data }) {

 const classes = useStyles()

   return (
    <div>
      <h1>User Details</h1>
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell align="left">Name</TableCell>
            <TableCell align="left">description</TableCell>
            <TableCell align="left">email</TableCell>
            <TableCell align="left">group</TableCell>
            <TableCell align="left">sn</TableCell>
            <TableCell align="left">uid</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            {Object.entries(data).map(([key, value])=> (
              <TableCell align="left" key={key}> {value}</TableCell>
            ))}
          </TableRow>
        </TableBody>
      </Table>


    </div>
   )
}

【问题讨论】：

为什么要渲染没有表格的表格？看起来像是语义上的事情。
另外，如果您坚持不使用表格，如果您将表格分解为多个单元格，那么我敢肯定（与一些非常简单的 CSS）你可以弄清楚如何以明显的表格格式呈现数据。虽然就像@FedericoklezCulloca 所说，如果它是一个数据表，只需将其呈现为一个表
希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
我同意@FedericoklezCulloca 的观点，但是如果您仍然认为自己不想使用表格，请使用 flexbox 构建自己的表格，只需 google 'flexbox tables'
您可以使用 css 的显示表格和表格单元格属性来完成，但这需要更多的代码，而不是简单地使用 html 表格

标签： html css reactjs html-table

【解决方案1】：

我发现我可以使用ListItem 和@material-ui 来达到相同的结果。这就是我要找的。使用一些 css 我可以让它水平显示项目。

代码如下：

import { makeStyles } from "@material-ui/core/styles"
import ListItem from "@material-ui/core/ListItem"
import List from "@material-ui/core/List"
import ListItemText from "@material-ui/core/ListItemText"
import Divider from "@material-ui/core/Divider"

const useStyles = makeStyles(theme => ({
  root: {
    display  : "flex",
    alignItems : "center",

  },
}))

export default function UserDetails({ data }) {

 const classes = useStyles()

   return (

    <div >
      <h1>User Details</h1>
        <List className={classes.root}>
            <ListItem > Cn </ListItem>
            <ListItem > Description</ListItem>
            <ListItem > Mail </ListItem>
            <ListItem > Ou </ListItem>
            <ListItem > Sn </ListItem>
            <ListItem > Uid </ListItem>
        </List>
    <Divider />
        <List className={classes.root}>
            {Object.entries(data).map(([key, value])=> (
            <ListItem align = "left ">{value} </ListItem>
             ))}
        </List>
    </div>
   )
}

【讨论】：