React table 优化问题(HTML,CSS)

Question

我正在使用 React 制作一个简单的网页，我需要在该网页上添加一个 table。 table 的内容没问题，但是 table 没有正确对齐。我没有在代码中看到任何问题。我该如何解决这个问题？

import React from 'react'

const StuffList = () => {
    return (
        <div className='list-group'>
            <table className="table table-hover table-danger"></table>
            <thead>
                <tr className="bg-primary">
                    <th scope="col">T.C</th>
                    <th scope="col">Name</th>
                    <th scope="col">Surname</th>
                    <th scope="col">City</th>
                    <th scope="col">Jobe</th>
                    <th scope="col">Salary</th>
                    <th scope="col">Hobbies</th>
                    <th scope="col">U.Graduate</th>
                    <th scope="col">Graduate</th>
                    <th scope="col">P.Graduate</th>
                    <th scope="col">Blood Group</th>
                    <th scope="col">Edit</th>
                    <th scope="col">Delete</th>
                    <th scope="col">Details</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>2826572</td>
                    <td>Mike</td>
                    <td>White</td>
                    <td>Kansas</td>
                    <td>Student</td>
                    <td>41</td>
                    <td>Parachute</td>
                    <td>no</td>
                    <td>no</td>
                    <td>no</td>
                    <td>ARH-</td>
                    <td><button className='btn btn-warning'>Update</button></td>
                    <td><button className='btn btn-danger'>Delete</button></td>
                    <td><button className='btn btn-info'>Details</button></td>

                </tr>
            </tbody>
        </div>
    )
}

export default StuffList

Answer 1

您可以提供 <tr style={{width:"100%",padding:"8px"}}>，对于 tds，您可以添加

<td style={{padding:"8px}}>

如果它不起作用，请给 table 及其父级 div 100% 宽度

React table 优化问题(HTML,CSS)

React table optimization problem(HTML,CSS)

html

css

reactjs

react-bootstrap