Materialize scroll tbody

Question

I am facing problem while setting tbody height width overflow-y: scroll.

I tried this CSS

.table-status-sheet tbody{
  min-height: 300px;
  overflow-y: auto;
}

This is my table code

 <div class="responsive-table table-status-sheet">
    <table class="bordered">
      <thead>
        <tr>
          <th class="center">No.</th>
          <th class="center">Category</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Category1</td>                 
        </tr>
        <tr>
          <td>2</td>
          <td>Category2</td>                 
        </tr>
        <tr>
          <td>3</td>
          <td>Category3</td>                 
        </tr>
        <tr>
          <td>4</td>
          <td>Category4</td>                 
        </tr>
      </tbody>
    </table>
  </div>

This code is working in bootstrap but not worked in 'Materialized' theme. Please help me fix this issue.

Answer 1

Here is how you can do it.

JSFiddle DEMO

tbody {
  display: block;
  height: 150px;
  overflow: auto;
}
thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
thead {
  width: calc( 100% - 1em )
}
table {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
 <div class="responsive-table table-status-sheet">
    <table class="bordered">
      <thead>
        <tr>
          <th class="center">No.</th>
          <th class="center">Category</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Category1</td>                 
        </tr>
        <tr>
          <td>2</td>
          <td>Category2</td>                 
        </tr>
        <tr>
          <td>3</td>
          <td>Category3</td>                 
        </tr>
        <tr>
          <td>4</td>
          <td>Category4</td>                 
        </tr>
      </tbody>
    </table>
  </div>