基础 CSS 堆叠表

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松设计美观的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

该表是一个基本的单元格布局，其中包含行和列中的数据。 Foundation CSS 提供了各种带有预定义类的

元素的变体，例如基本表、条纹表、悬停状态表、滚动表和堆叠表。在本文中，我们将了解堆叠表变体。

Stacked Table是一种表格布局，它在小屏幕上将其单元格堆叠在一起，以使布局在所有屏幕尺寸上都具有响应性和一致性。要将基本的 Foundation CSS 表转换为可堆叠的表，我们使用 stack 类。 .stack类在 HTML 的

元素中使用。

基础 CSS 堆叠表类：

• stack：此类将基本表格转换为可堆叠表格，其中所有单元格以较小的屏幕尺寸堆叠在彼此下方。

句法：

示例 1：这是 Foundation CSS 中可堆叠表格的基本演示。

HTML

  

    
    
  
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        Foundation CSS Stackable table
        
    
    
        
            
                
                
                
            
        
        
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
        
    Table HeaderTable HeaderTable HeaderGeeksforGeeksIt contains well written, well thought
                    and well explained computer science and
                    programming articlesA Computer Science portal for geeks.GeeksforGeeksIt contains well written, well thought
                    and well explained computer science and
                    programming articlesA Computer Science portal for geeks.GeeksforGeeksIt contains well written, well thought
                    and well explained computer science and
                    programming articlesA Computer Science portal for geeks.GeeksforGeeksIt contains well written, well thought
                    and well explained computer science and
                    programming articlesA Computer Science portal for geeks.
    
        $(document).foundation();
    

  

输出：

示例 2：这是 Foundation CSS 中非条带可堆叠表格的基本演示。

HTML

  

    
    
  
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        Foundation CSS Stackable table
        
    
    
        
            
                
                
                
            
        
        
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
        
    Table HeaderTable HeaderTable HeaderGeeksforGeeksIt contains well written, well thought
                  and well explained computer science and
                  programming articlesA Computer Science portal for geeks.GeeksforGeeksIt contains well written, well thought
                  and well explained computer science and
                  programming articlesA Computer Science portal for geeks.GeeksforGeeksIt contains well written, well thought
                  and well explained computer science and
                  programming articlesA Computer Science portal for geeks.GeeksforGeeksIt contains well written, well thought
                  and well explained computer science and
                  programming articlesA Computer Science portal for geeks.
    
        $(document).foundation();
    

  

输出：

参考： https://get.foundation/sites/docs/table.html#stacked-table