Table css issue in reactJS - css

Question

i'm having a weird behavior for the table's data , it's not aligned at all , how can i solve this problem ? is there a way to specify the column width and to start the text from the same position ?
see the table below
table
here is my code that contains the table head :
const HospitalsList = (props) => (
<div className="content-container">
<div className="header__content">
<h1>Hospitals List</h1>
</div>
<HospitalsListFilters />
<AddHospitalPage/>
<table className="content-table">
<thead>
<tr>
<th>Hospital Name</th>
<th>Province</th>
<th>Sector</th>
<th>No of OR</th>
<th>No of Beds</th>
</tr>
</thead>
</table>
{props.hospitals.map((hospital) => {
return <HospitalListItem key={hospital.id}{...hospital} />
})}
</div>
)
and here is the code for the table data :
const HospitalListItem =({id, name, province, sector, noOfOR, noOfBeds,lastUpdate, dispatch}) => (
<div>
<table className="content-table">
<tbody>
<tr>
<Link to ={`/edit/${id}`}>
<td>{name}</td>
</Link>
<td>{province}</td>
<td>{sector}</td>
<td>{noOfOR}</td>
<td>{noOfBeds}</td>
</tr>
</tbody>
</table>
</div>
here is the css file :
.content-table {
border-collapse: collapse;
font-size: larger;
min-width: 1200px;
max-width: 1400px;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.15);
margin-left: $l-size;
thead tr {
th{
padding : 12px 15px;
}
background-color: teal;
color: white;
font-weight: bold;
}
td {
padding : 12px;
}
tbody tr {
border-bottom: 1px solid #dddddd;
}
tbody tr:last-of-type{
border-bottom: 2px solid #dddddd;
}
}

Answer 1

You are creating a new table for every row. Instead, you should .map inside the main table (within the tbody element):
<table className="content-table">
<thead>
<tr>
<th>Hospital Name</th>
<th>Province</th>
<th>Sector</th>
<th>No of OR</th>
<th>No of Beds</th>
</tr>
</thead>
<tbody>
{props.hospitals.map((hospital) => {
return <HospitalListItem key={hospital.id} {...hospital} />
})}
</tbody>
</table>
Then change HostpitalListItem to only render a table row:
const HospitalListItem =({id, name, province, sector, noOfOR, noOfBeds,lastUpdate, dispatch}) => (
<tr>
<td><Link to={`/edit/${id}`}>{name}</Link></td>
<td>{province}</td>
<td>{sector}</td>
<td>{noOfOR}</td>
<td>{noOfBeds}</td>
</tr>
)