title: Bootstrap 4 table with the scrollable body and header fixed
body: <p><a href="https://i.stack.imgur.com/YasoT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YasoT.png" alt="enter image description here" /></a><a href="https://i.stack.imgur.com/ubmHZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ubmHZ.png" alt="enter image description here" /></a>
  I am new to front-end-development. Here I have the following table:</p>
  <pre><code>  &lt;div className=&quot;table-responsive&quot;&gt;
      &lt;table className=&quot;table table-hover&quot; id=&quot;job-table&quot;&gt;
        &lt;thead&gt;
          &lt;tr className=&quot;text-center&quot;&gt;
            &lt;th scope=&quot;col&quot;&gt;Sr.No.&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Company Name&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Technology&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Total Resumes&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Job Title&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Total Score&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Average Score&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody className=&quot;text-center&quot;&gt;
          {this.props.list &amp;&amp; this.props.list.content &amp;&amp; this.props.list.content.length &gt; 0 &amp;&amp; this.props.list.content.map((item, key) =&gt; {
            return (
              &lt;tr key={key}&gt;
                &lt;td className=&quot;font-weight-bold&quot;&gt;1&lt;/td&gt;
                &lt;td className=&quot;font-weight-bold&quot;&gt;ABCDED&lt;/td&gt;
                &lt;td&gt;Software Developer&lt;/td&gt;
                &lt;td className=&quot;font-weight-bold&quot;&gt;17&lt;/td&gt;
                &lt;td&gt;5 years experience&lt;/td&gt;
                &lt;td className=&quot;font-weight-bold&quot;&gt;30&lt;/td&gt;
                &lt;td className=&quot;font-weight-bold&quot;&gt;30&lt;/td&gt;
              &lt;/tr&gt;
            )
          })}
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  </code></pre>
  <p>In this I have used the <code>table-responsive class</code>. I have tried to make this table scrollable by using this:</p>
  <pre><code>tbody { height: 400px; overflow-y: scroll }
  </code></pre>
  <p>But this is not working.</p>
  <p>One other thing about the content of the <code>td</code>, if it is large the other rows gets affected. How can I avoid this scenario?</p>
  <p><a href="https://i.stack.imgur.com/ubmHZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ubmHZ.png" alt="enter image description here" /></a>
  [![enter image description here][3]][3]</p>