React table optimization problem(HTML,CSS) - html

Question

I am making a simple web page using React and I need a table on this page. The contents of the table are OK, but the table is not properly aligned. I do not see any problem in the code. How Can I Solve This?
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

you can give the <tr style={{width:"100%",padding:"8px"}}> and for tds you can add
<td style={{padding:"8px}}>
if it didn't worked give the table and its parent div 100% width