https://i.sstatic.net/YasoT.pnghttps://i.sstatic.net/ubmHZ.png I'm new to the world of front-end development and I'm currently working on a table layout. Here's the code snippet of the table I've created:
<div className="table-responsive">
<table className="table table-hover" id="job-table">
<thead>
<tr className="text-center">
<th scope="col">Sr.No.</th>
<th scope="col">Company Name</th>
<th scope="col">Technology</th>
<th scope="col">Total Resumes</th>
<th scope="col">Job Title</th>
<th scope="col">Total Score</th>
<th scope="col">Average Score</th>
</tr>
</thead>
<tbody className="text-center">
{this.props.list && this.props.list.content && this.props.list.content.length > 0 && this.props.list.content.map((item, key) => {
return (
<tr key={key}>
<td className="font-weight-bold">1</td>
<td className="font-weight-bold">ABCDED</td>
<td>Software Developer</td>
<td className="font-weight-bold">17</td>
<td>5 years experience</td>
<td className="font-weight-bold">30</td>
<td className="font-weight-bold">30</td>
</tr>
)
})}
</tbody>
</table>
</div>
I have implemented the table-responsive class to make the table scrollable, but it's not functioning as expected.
tbody { height: 400px; overflow-y: scroll }
Another issue I'm facing is with large content in the td cells affecting other rows. How can I prevent this from happening?