I am new to front-end-development. Here I have the following table:

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

In this I have used the table-responsive class. I have tried to make this table scrollable by using this:

tbody { height: 400px; overflow-y: scroll }

But this is not working.

One other thing about the content of the td, if it is large the other rows gets affected. How can I avoid this scenario?

[![enter image description here][3]][3]