📜  Materialize-css 表

📅  最后修改于: 2021-01-07 00:39:20             🧑  作者: Mango

实现CSS表

在Materialize CSS中,您可以使用各种样式显示不同类型的表。以下是各种样式的列表:

Index Class name Description
1) none It is used to represent a basic table without any border.
2) stripped It is used to display a stripped table.
3) bordered It is used to draw a table with a border across rows.
4) highlight It is used to draw a highlighted table.
5) centered It is used to draw a table with all the text center aligned in the table.
6) responsive-table It is used to draw a responsive table to show a horizontal scrollbar, if the screen is too small to display the content.

让我们以一个示例来演示Materialize CSS中的不同类型的表。此示例包含简单表,剥离表,居中表和响应表。



   
      The Materialize Example
            
      
      
                 
                   
      
      
   
   
    
      

Tables Demo


Simple Table

ID Name Address
1 Ajeet Allahabad
2 Rahul Bombay
3 Mohan Mathura

Stripped Table with borders

ID Name Address
1 Ajeet Allahabad
2 Rahul Bombay
3 Mohan Mathura

Centered Table

ID Name Address
1 Ajeet Allahabad
2 Rahul Bombay
3 Mohan Mathura

Responsive table

Student Class Data #1 Data #2 Data #3 Data #4 Data #5 Data #6 Data #7 Data #8 Data #9 Data #10
Ajeet VI 10 11 12 13 14 15 16 17 19 20
Rahul VI 10 11 12 13 14 15 16 17 19 20
Mohan VI 10 11 12 13 14 15 16 17 19 20