I've noticed some strange behavior with the alignment of my table data. It seems to be all over the place. How can I fix this issue? Is there a way to specify column widths and ensure the text starts from the same position?
Take a look at the table below:
Below is the code snippet that contains the table header:
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 styling:
.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;
}
}