title: Table in HTML not displaying as wanted
body: <p>Trying to create table scrollable.</p>
  
  <p>But it is displaying as: <a href="https://i.stack.imgur.com/JNF21.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JNF21.jpg" alt="enter image description here"></a>.</p>
  
  <p>I wanted as: <a href="https://i.stack.imgur.com/gklWh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gklWh.jpg" alt="enter image description here"></a> with scroll.</p>
  
  <p>I tried:</p>
  
  <pre><code>&lt;style&gt;
  table.scroll tbody,
  table.scroll thead { display: block; }
  
  
  
  table.scroll tbody {
      height: 300px;
      overflow-y: auto;
      overflow-x: hidden;
  }
  
  &lt;/style&gt;
  &lt;script&gt;
  // Change the selector if needed
  var $table = $('table.scroll'),
      $bodyCells = $table.find('tbody tr:first').children(),
      colWidth;
  
  // Adjust the width of thead cells when window resizes
  $(window).resize(function() {
      // Get the tbody columns width array
      colWidth = $bodyCells.map(function() {
          return $(this).width();
      }).get();
  
      // Set the width of thead columns
      $table.find('thead tr').children().each(function(i, v) {
          $(v).width(colWidth[i]);
      });    
  }).resize(); // Trigger resize handler
  &lt;/script&gt;
  </code></pre>
  
  <p>I want a table which has scroll effect in it <code>tbody</code></p>