基础 CSS 厨房水槽桌

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

Kitchen Sink具有在我们的网站和应用程序中运行良好的基础元素。表格组件允许您聚合大量数据并以清晰有序的方式呈现。它可以通过使用

标签轻松实现。

基础 CSS 厨房水槽表类：

• hover：此类用于在悬停时使表格行稍微变暗。
• unstriped：这个类用于创建一个非条带表，因为默认情况下，表行是条带的。
• stack：这个类用于在小屏幕上堆叠表格，现在表格被堆叠成小部分。
• table-scroll：该类允许您在表格中启用水平滚动，以便您可以显示更多表格数据

句法：

... ...

例子： 以下代码演示了与悬停类一起使用的 Kitchen sink Table 组件。

HTML

  

    Foundation CSS Kitchen Sink Table
    
    
  
    
    
    
    
    
    

  

    
        GeeksforGeeks
        Foundation CSS Kitchen Sink Table
        
        
            
                
                    
                    
                    
                
            
  
            
                
                    
                    
                    
                
  
                
                    
                    
                    
                
  
                
                    
                    
                    
                
            
        Header 1Header 2Header 3Cell 00Cell 01Cell 02Cell 10Cell 11Cell 12Cell 20Cell 21Cell 22
    
  
    
        $(document).foundation();
    

  

输出：

基础 CSS 厨房水槽桌

示例：以下代码演示了与非条带类一起使用的 Kitchen sink Table 组件。

HTML

    Foundation CSS Kitchen Sink Table
    
    
    
    
    
    
    

  

    
        GeeksforGeeks
        Foundation CSS Kitchen Sink Table
        
        
            
                
                    
                    
                    
                
            
  
            
                
                    
                    
                    
                
  
                
                    
                    
                    
                
  
                
                    
                    
                    
                
            
        Header 1Header 2Header 3Cell 00Cell 01Cell 02Cell 10Cell 11Cell 12Cell 20Cell 21Cell 22
    
    
    
        $(document).foundation();
    

  

输出：

基础 CSS 厨房水槽桌

例子： 以下代码演示了与堆栈类一起使用的 Kitchen sink Table 组件。

HTML

  

    Foundation CSS Kitchen Sink Table
    
    
  
    
    
    
    
    

  

    
        GeeksforGeeks
        Foundation CSS Kitchen Sink Table
        
        
            
                
                    
                    
                    
                
            
  
            
                
                    
                    
                    
                
  
                
                    
                    
                    
                
  
                
                    
                    
                    
                
            
        Header 1Header 2Header 3Cell 00Cell 01Cell 02Cell 10Cell 11Cell 12Cell 20Cell 21Cell 22
    
  
    
        $(document).foundation();
    

  

输出：

基础 CSS 厨房水槽桌

例子： 以下代码演示了与table-scroll类一起使用的 Kitchen sink Table 组件。

HTML

  

    Foundation CSS Kitchen Sink Table
    
    
  
    
    
    
    
    

  

    
        GeeksforGeeks
        Foundation CSS Kitchen Sink Table
        
        
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
            
  
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
  
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
  
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
            
        Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8Header 9Cell 00Cell 01Cell 02Cell 03Cell 04Cell 05Cell 06Cell 07Cell 08Cell 10Cell 11Cell 12Cell 13Cell 14Cell 15Cell 16Cell 17Cell 18Cell 20Cell 21Cell 22Cell 23Cell 24Cell 25Cell 26Cell 27Cell 28
    
  
    
        $(document).foundation();
    

  

输出：

基础 CSS 厨房水槽桌

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