20个CSS表格样式示例，让你的网页更加美观和易于阅读

一、背景颜色

表格的背景颜色可以通过CSS设置，将表格的背景颜色设置为灰色：

table {
  background-color: #ccc;
}

效果如下：

当然，你也可以设置表头和表格行的不同颜色：

thead {
  background-color: #ccc;
}

tbody {
  background-color: #eee;
}

效果如下：

二、表格边框

表格的边框也可以通过CSS进行设置：

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #ccc;
}

效果如下：

如果你想让表格的边框更加粗一些，可以调整border属性的值：

td, th {
  border: 2px solid #ccc;
}

效果如下：

三、表头固定

如果表格的内容很多，需要滚动才能看到所有的行，那么表头就可能被滚动出屏幕外。为了避免这种情况，可以让表头固定在页面上方：

thead {
  position: fixed;
}

效果如下：

但是这样会导致表头无法滚动，看不到表格内容。如果你需要同时让表头和表格内容都能够横向滚动，可以添加一个div，并将表头和表格内容都包裹在div中：

  

  
   

    
    

      
     

        
      

          
       
姓名
          
       
年龄
          
       
性别
        
      
      
     
      
     

        
      

          
       
小明
          
       
18
          
       
男
        
      
        
      

          
       
小红
          
       
20
          
       
女
        
      
        
      

          
       
小刚
          
       
19
          
       
男
        
      
        
      

          
       
小李
          
       
21
          
       
女
        
      
        
      

          
       
小张
          
       
22
          
       
男
        
      
        
      

          
       
小王
          
       
23
          
       
女
        
      
        
      

          
       
小黑
          
       
24
          
       
男
        
      
        
      

          
       
小白
          
       
25
          
       
女
        
      
        
      

          
       
小黄
          
       
26
          
       
男
        
      
        
      

          
       
小蓝
          
       
27
          
       
女
        
      
      
     
    
    
  
   

  

效果如下：

四、奇偶行颜色不同

为了使表格更易于阅读，可以将奇数行和偶数行的背景颜色设置成不同的颜色：

tr:nth-child(even) {
  background-color: #eee;
}

tr:nth-child(odd) {
  background-color: #ccc;
}

效果如下：

奇数行和偶数行的样式也可以自定义，例如设置为蓝色和红色：

tr:nth-child(even) {
  background-color: blue;
  color: white;
}

tr:nth-child(odd) {
  background-color: red;
  color: white;
}

效果如下：