Semantic-UI 表紧凑变体

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。它使用一个类将 CSS 添加到元素中。

表格是一种组织大量数据的简单方法。表是行和列中的数据排列，或者可能是更复杂的结构。表格广泛用于交流、研究和数据分析。表格可用于各种任务，例如呈现文本信息和数字数据。它可用于比较表格形式布局中的两个或多个项目。表用于创建数据库。 HTML 表和语义 UI 表在结构上都是相同的。

Table Compact Variation用于一次使更多行可见。

语义 UI 表紧凑变体类：

• compact：此类用于创建紧凑类型的表。

句法：

        ...
    
    ...

示例 1：此示例说明了 Normal Table 和 Table Compact Variation 之间的区别。

HTML

  

    Semantic UI Table Compact Variation
    
  
    
    
  
    
    

  

    
        GeeksforGeeks
        Semantic UI Table Compact Variation
    
    Normal Table
    
        
            
            
            
            
            
        
        
            
            
            
            
            
            
            
            
            
            
        
        NameStatusNotesJohnApprovedNoneJamieApprovedRequires call
          
        Compact Table
        
        
            
            
            
            
            
        
        
            
            
            
            
            
            
            
            
            
            
        
    NameStatusNotesJohnApprovedNoneJamieApprovedRequires call

  

输出：

示例 2：这是一个基本示例，说明了使用语义 UI 制作的彩色表格紧凑变体。

HTML

  

    Semantic UI Table Compact Variation
  
    
  
     
    
  
    
    

  

    
        GeeksforGeeks
        Semantic UI Table Compact Variation
    
      
    
        
            
            
            
            
            
        
        
            
            
            
            
            
            
            
            
            
            
        
    NameStatusNotesJohnApprovedNoneJamieApprovedRequires call
  
    
        
            
            
            
            
            
        
        
            
            
            
            
            
            
            
            
            
            
        
    NameStatusNotesJohnApprovedNoneJamieApprovedRequires call
  
    
        
            
            
            
            
            
        
        
            
            
            
            
            
            
            
            
            
            
        
    NameStatusNotesJohnApprovedNoneJamieApprovedRequires call

  

输出：

参考： https://semantic-ui.com/collections/table.html#compact