WordPress后台文章列表页：为表格奇偶行添加整行线性渐变背景

CSS3完全可以实现整行渐变效果，不需要依赖JavaScript。你之前的问题出在表格默认布局和单元格背景的覆盖，调整以下两点就能解决：

• 先设置表格边框合并，消除单元格间距，让行的背景能铺满整行：

  .wp-list-table {
    border-collapse: collapse;
  }
  

• 给奇偶行添加渐变背景，同时将单元格（td/th）的背景设为透明，避免单元格默认背景覆盖行的渐变：

  /* 奇数行渐变样式 */
  .wp-list-table tr:nth-child(odd) {
    background: linear-gradient(to right, #f9f9f9, #f0f0f0);
  }
  
  /* 偶数行渐变样式 */
  .wp-list-table tr:nth-child(even) {
    background: linear-gradient(to right, #ffffff, #f5f5f5);
  }
  
  /* 让单元格背景透明，透出整行渐变 */
  .wp-list-table tr td,
  .wp-list-table tr th {
    background-color: transparent;
  }
  

原理说明 #

WordPress后台文章列表的表格默认使用wp-list-table类，默认状态下表格的border-collapse属性为separate，单元格之间存在间距，且td/th自带白色背景，导致行的渐变无法完整显示。通过合并边框+设置单元格背景透明，就能让行的渐变完整覆盖整行区域，而非每个单元格单独呈现渐变。

内容的提问来源于stack exchange，提问作者imagIne