實現滾動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> 

此代碼工作在引導，但在「物化」的主題沒有奏效。 請幫我解決這個問題。在其他Nexus Q發現

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

溶液：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; 
    }