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

因此，我正在尝试对齐获取的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>
   )
}

导出默认函数UserDetails（{data}）{
常量类=useStyles（）
返回(
用户详细信息
名称
描述
电子邮件
组
锡
液体
{Object.entries（data.map）（[key，value]）=>(
{value}
))}
)
}

我发现我可以将

列表项

与

@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>
   )
}

从“@material ui/core/styles”导入{makeStyles}
从“@material ui/core/ListItem”导入ListItem
从“@material ui/core/List”导入列表
从“@material ui/core/ListItemText”导入ListItemText
从“@material ui/core/Divider”导入分隔器
const useStyles=makeStyles（主题=>({
根目录：{
显示：“flex”，
对齐项目：“中心”，
},
}))
导出默认函数UserDetails（{data}）{
常量类=useStyles（）
返回(
用户详细信息
Cn
描述
邮寄
欧点
锡
液体
{Object.entries（data.map）（[key，value]）=>(
{value}
))}
)
}

为什么要渲染没有表的表？看起来像是语义上的事情。另外，如果你坚持不使用表，如果你把表分解成单元格，然后不把它们当作单元格，而是当作页面上的单个元素，我相信（使用一些非常简单的CSS）你可以弄清楚如何以表格式呈现数据。尽管像@FedericoklezCulloca所说的那样，如果它是一个数据表，只需将其呈现为一个表就可以了。我们希望您至少尝试自己编写代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回您的代码并解释您尝试了什么。我同意@FedericoklezCulloca，但是如果您仍然认为您不想使用table，请使用flexbox构建您自己的table，只需谷歌“flexbox tables”，您可以使用css的显示表和表格单元格属性来实现，但这需要更多的代码，而不仅仅是使用html表