W3.CSS-表格 - 芒果文档

📌 相关文章

📜 W3.CSS-表格

📅 最后修改于: 2020-10-17 05:12:42 🧑 作者: Mango

W3.CSS可以用于在w3-table上使用各种样式显示不同类型的表。

Sr. No.	Class Name & Description
1	w3-table Represents a basic table without any border.
2	w3-striped Displays a stripped table.
3	w3-bordered Draws a table with a border across rows.
4	w3-border Draws a table with borders.
5	w3-card Draws a table as a card.
6	w3-responsive Draws a responsive table to show a horizontal scrollbar, if the screen is too small to display the content.
7	w3-tiny Draws a table with very small font.
8	w3-small Draws a table with small font.
9	w3-large Draws a table with large font.
10	w3-xlarge Draws a table with extra large font.
11	w3-xxlarge Draws a table with very extra large font.
12	w3-xxxlarge Draws a table with very high extra large font.
13	w3-jumbo Draws a table with jumbo large font.

例

w3css_tables.htm

现场演示

The W3.CSS Tables
      
      
   
   
   
      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
            
         
      
      
      
      Table as Card
      
         
            
            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
               
            
         
      
      
      Table with very small font
      
         
            
               Student
               Class
               Grade
            
         
         
            
               Mahesh Parashar
               VI
               A
            
            
               Rahul Sharma
               VI
               B
               
            
               Mohan Sood
               VI
               A

Student	Class	Grade
Mahesh Parashar	VI	A
Rahul Sharma	VI	B
Mohan Sood	VI	A

Student	Class	Grade
Mahesh Parashar	VI	A
Rahul Sharma	VI	B
Mohan Sood	VI	A

Student	Class	Grade
Mahesh Parashar	VI	A
Rahul Sharma	VI	B
Mohan Sood	VI	A

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

Student	Class	Grade
Mahesh Parashar	VI	A
Rahul Sharma	VI	B
Mohan Sood	VI	A

结果

验证结果。