Table css issue in reactJS

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