Materialize scroll tbody

Question

У меня проблема при установке tbody высота ширина overflow-y: scroll.

Я попробовал этот CSS

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

Это моя кодовая таблица

<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 1

Вот как вы можете это сделать.

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

найденное решение в другом Q: How to set tbody height with overflow scroll

вы должны установить TBODY к -> дисплей: блок;

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; 
    }