如何使用 CSS 创建一个斑马条纹表？

斑马纹表是具有不同颜色阴影的交替行（或列）的表。使用斑马线剥离表的好处很多，例如增加行（或列）的可读性，强调一组特定的行（或列）等。

本文将告诉您如何仅使用 HTML 和 CSS 在网页中创建斑马纹表（行或列）。

带有斑马条纹的表：

• 进入 tr（表格行）元素是 CSS。
• 使用nth-child()选择器并将您选择的背景颜色添加到所有奇数（或偶数）表行。

示例：交替行获得不同的背景颜色，从而创建一个带有斑马纹行的表格。

HTML

 

    
    

 

    
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
    
Model
Make
Year
Transmission Type
Urus
Lamborghini
2017
Automatic
Cayenne Turbo
Porsche
2018
Automatic
Durango SRT
Dodge
2018
Automatic
Juke Nismo RS
Nissan
2014
Manual
Escalade ESV
Cadillac
2012
Automatic
Levante S
Maserati
2017
Automatic

 

输出：

带有 Zebra 剥离列的表：

• 点击 CSS 中的 td（表格数据）元素。
• 使用 nth-child()选择器并添加一个 您选择的所有奇数（或偶数）表格数据单元格的背景颜色。

示例：交替单元格获得不同的背景颜色，这使得交替列的颜色不同，从而创建一个带有斑马纹列的表格。

HTML

 

    
    

 

    
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
    
Model
Make
Year
Transmission Type
Urus
Lamborghini
2017
Automatic
Cayenne Turbo
Porsche
2018
Automatic
Durango SRT
Dodge
2018
Automatic
Juke Nismo RS
Nissan
2014
Manual
Escalade ESV
Cadillac
2012
Automatic
Levante S
Maserati
2017
Automatic

 

输出