title: Bootstrap 4 table responsive tbody scroll
body: <p>Using Bootstrap 4. I have a responsive table in which I would like to make a scrollable tbody. Table look like this:</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
    &lt;table class="table table-striped table-hover custom-table text-nowrap"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;row1&lt;/th&gt;
          &lt;th&gt;row2&lt;/th&gt;
          &lt;th&gt;row2&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;!-- some rows --&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>To scroll in tbody, I added a scss class <code>.custom-table</code> to table, it looks like this</p>
  
  <pre><code>.custom-table {
    tbody {
       height: 50px;
       overflow-y: auto;
       width: 100%;
       display: block;
    }
  }
  </code></pre>
  
  <p>However, this style does not work correctly. All content in tbody moves to the left. I have a working <a href="http://jsfiddle.net/hntmdfxb/" rel="nofollow noreferrer">JSFiddle</a> example.
  What did I do wrong?</p>