Создать таблицу с заголовком таблицы, используя json в реакции

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

Попробуйте удалить элемент div из tbody.

Answer 2

когда вы отображаете свои данные и возвращаете их в <tr>, <td> Удаляете <div> при заполнении таблицы, потому что div не может быть дочерним для table.

Answer 3

Изменен ваш код для правильного отображения таблицы.

 <tbody>
                        {this.state.arr.map((card)=>{
                            return(

                                <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>

                        ) })}
                    </tbody>

Answer 4

Добавьте это к тегу таблицы <table style="width:100%"> Это также будет работать.

Или, если вы хотите использовать абсолютный стиль таблиц, используйте Bootstrap, чтобы он был отзывчивым. Вот ссылка на таблицы для bootstrap

Также удалите тег <div>, так как он не рекомендуется для тела таблицы, но он будет работать нормально.

Answer 5

<div> не допускается как непосредственный дочерний элемент любого из элементов таблицы (кроме <th>, <td> и <caption>) и будет автоматически перемещаться за пределы элемента со всем его содержимым.

Попробуйте удалить элементы <div> вокруг элементов <tr>.