Materialize the scroll cable

Question

I ran into a 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 works in bootstrap but does not work in the Materialized topic. Please help me fix this problem.

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> 

Answer 2

found in another Q: How to set body height with overflow scroll

you need to set tbody to → display: block;

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