Question

我正在尝试获取JSON数据并使用带有表标题的表来创建表。我已经成功完成了，但是问题是表格显示不正确。

render(){
    return(
        <div className='container'>
            <table>
                <thead>
                    <tr>
                        <th>User_Name</th>
                        <th>Address</th>
                        <th>Date Of Birth</th>
                        <th>Email</th>
                        <th>Profile Picture</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.arr.map((card)=>{
                        return(
                        <div>
                            <tr>
                                <td>{card.user_name}</td>
                                <td>{card.address}</td>
                                <td>{card.date_of_birth}</td>
                                <td>{card.email}</td>
                                <td>{card.profile_picture}</td>
                                <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button></td>
                                <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
                            </tr>
                        </div>
                    ) })}
                </tbody>
             </table>

表格如下：

https://screenshots.firefox.com/7i07VlkEFYlAj8ga/mrigank.com

我希望桌子妥善安排。

Answer 1

在映射数据并将其返回到<tr>时，<td>在填充表时删除<div>，因为div不能是{{1 }}。

Answer 2

尝试从div中删除tbody元素。

Answer 3

<div>不允许作为任何表元素（<th>，<td>和<caption>除外）的直接子元素，并且会自动移到该元素之外及其所有内容。

尝试删除<div>元素周围的<tr>元素。

Answer 4

将其添加到表标签import random meals = ['Steak', 'Chicken', 'Fish', 'Hamburger', 'Taco', 'HotDog' , 'Bier Rocks', 'Pork'] days = ['Monday' , 'Tuesday' , 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] #Shuffle the meals random.shuffle(meals) #Choose 7 choices day_meals = random.sample(meals,7) #Print day and respective Choice for idx in range(7): print(f"The selected meal for {days[idx]}: {day_meals[idx]}")中也将起作用。

或者，如果您想使用绝对表样式，请对其使用Bootstrap，以使其具有响应性。这是bootstrap

的表的链接

还请删除The selected meal for Monday: Fish The selected meal for Tuesday: Pork The selected meal for Wednesday: Steak The selected meal for Thursday: Bier Rocks The selected meal for Friday: HotDog The selected meal for Saturday: Taco The selected meal for Sunday: Hamburger标记，因为它不建议用于表主体，但是可以正常使用。

Answer 5

修改了代码以正确显示表格。

df = pd.concat([df.iloc[:, :pos], df2, df.iloc[:, pos:]], axis=1)
print (df)
  col1  col2 name_a name_b name_c name_d name_g name_h  col4
0    A    10      a      b      c    NaN    NaN    NaN    20
1    B    30      a      b    NaN      d    NaN    NaN    40
2    C    50      a    NaN    NaN    NaN      g      h    60

在React中使用JSON创建带有表标题的表

5 个答案: