📌  相关文章
📜  Materialize-表

📅  最后修改于: 2020-10-22 08:24:22             🧑  作者: Mango

 

Materialize可用于在表格上使用各种样式来显示不同类型的表格。

Sr.No. Class Name & Description
1 None

Represents a basic table without any border.
2 stripped

Displays a stripped table.
3 bordered

Draws a table with a border across rows.
4 highlight

Draws a highlighted table.
5 centered

Draws a table with all the text center aligned in the table.
6 responsive-table

Draws a responsive table to show a horizontal scrollbar, if the screen is too small to display the content.

例

materialize_tables.htm

The Materialize Example
            
      
      
                 
                   
      
      
   
   
    
      
Tables Demo

      
      

      
Simple Table

      

         
            

               Student
               Class
               Grade
            

         
      
         
            

               Mahesh Parashar
               VI
               A
            


            

               Rahul Sharma
               VI
               B
            

         
            

               Mohan Sood
               VI
               A
            

         
      

      
      
Stripped Table with borders

      

         
            

               Student
               Class
               Grade
            

         
         
         
            

               Mahesh Parashar
               VI
               A
            

            
            

               Rahul Sharma
               VI
               B
            

            
            

               Mohan Sood
               VI
               A
            

         
      

      
      

      
Centered Table

      

         
            
Student
               Class
               Grade
            

         
         
         
            

               Mahesh Parashar
               VI
               A
            

            
            

               Rahul Sharma
               VI
               B
            

            
            

               Mohan Sood
               VI
               A
            

         
      

      
      
Responsive table

      

         
            

               Student
               Class
               Data #1
               Data #2
               Data #3
               Data #4
               Data #5
               Data #6
               Data #7
               Data #8
               Data #9
               Data #10
            

         
         
            

               Mahesh Parashar
               VI
               10
               11
               12
               13
               14
               15
               16
               17
               19
               20
            

            
            

               Rahul Sharma
               VI
               10
               11
               12
               13
               14
               15
               16
               17
               19
               20
            

            
            

               Mohan Sood
               VI
               10
               11
               12
               13
               14
               15
               16
               17
               19
               20

结果

验证结果。