स्क्रॉल टॉबी

Question

सामग्री को tbody ऊंचाई चौड़ाई overflow-y: scroll सेट करते समय समस्या का सामना करना पड़ रहा है।

मैं इस सीएसएस

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

इस कोड बूटस्ट्रैप में काम कर रहा है लेकिन 'materialized' विषय में काम नहीं कर रही है। कृपया इस समस्या को ठीक करने में मेरी सहायता करें।

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