20个CSS表格样式示例，让你的网页更加美观和易于阅读(7款颜色的CSS表格样式美化网页表格)

一、背景颜色

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

table {
  background-color: #ccc;
}

效果如下：

姓名	年龄	性别
小明	18	男
小红	20	女

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

thead {
  background-color: #ccc;
}

tbody {
  background-color: #eee;
}

效果如下：

姓名	年龄	性别
小明	18	男
小红	20	女

二、表格边框

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

table {
  border-collapse: collapse;
}

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

效果如下：

姓名	年龄	性别
小明	18	男
小红	20	女

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

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

效果如下：

姓名	年龄	性别
小明	18	男
小红	20	女

三、表头固定

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

thead {
  position: fixed;
}

效果如下：

姓名	年龄	性别
小明	18	男
小红	20	女
小刚	19	男
小李	21	女
小张	22	男
小王	23	女
小黑	24	男
小白	25	女
小黄	26	男
小蓝	27	女

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

  
    

      

        

          
姓名
          
年龄
          
性别
        
      
      

        

          
小明
          
18
          
男
        
        

          
小红
          
20
          
女
        
        

          
小刚
          
19
          
男
        
        

          
小李
          
21
          
女
        
        

          
小张
          
22
          
男
        
        

          
小王
          
23
          
女
        
        

          
小黑
          
24
          
男
        
        

          
小白
          
25
          
女
        
        

          
小黄
          
26
          
男
        
        

          
小蓝
          
27
          
女
        
      
    
  

效果如下：

姓名	年龄	性别
小明	18	男
小红	20	女
小刚	19	男
小李	21	女
小张	22	男
小王	23	女
小黑	24	男
小白	25	女
小黄	26	男
小蓝	27	女

四、奇偶行颜色不同

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

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

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

效果如下：

姓名	年龄	性别
小明	18	男
小红	20	女
小刚	19	男
小李	21	女
小张	22	男
小王	23	女
小黑	24	男
小白	25	女
小黄	26	男
小蓝	27	女

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

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

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

效果如下：

<tr

姓名	年龄	性别
小明	18	男
小红	20	女
小刚	19	男
小李	21	女
小张	22	男
小王	23	女
小黑	24	男