マテリアライズスクロール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> 

このコードは、ブートストラップでの作業が、「マテリア」のテーマで働いていないですが試してみました。 この問題を解決するのを手伝ってください。別の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; 
    }